vue webpack配置檔案 自動上傳阿裡雲

項目建構自動部署到oss

• 安裝插件包
• 配置環境
• • 建立測試和生産環境檔案
  • 配置`vue.config.js`檔案
  • 如何擷取ossAccessKeyId
• 建構部署測試環境
• 建構部署生産環境

安裝插件包

webpack的插件，用于自動上傳靜态資源到阿裡的oss上，以便作為靜态資源使用，當然你也可以用于自動存儲大檔案。aliyunoss-webpack-plugin

npm install aliyunoss-webpack-plugin --dev
# 或
yarn add aliyunoss-webpack-plugin
           

配置環境

建立測試和生産環境檔案

// .env.production 生産環境檔案名稱
NODE_ENV = 'production'

VUE_APP_FLAG = 'production'

outputDir = 'dist'

ossAccessKeyId = '你自己的ossAccessKeyId'

ossAccessKeySecret = '你自己的ossAccessKeySecret'
           

// .env.test 測試環境檔案名稱
NODE_ENV = 'test'

VUE_APP_FLAG = 'test'

outputDir = 'dist'

ossAccessKeyId = '你自己的ossAccessKeyId'

ossAccessKeySecret = '你自己的ossAccessKeySecret'
           

配置

vue.config.js

檔案

// vue.config.js
const AliyunossWebpackPlugin = require('aliyunoss-webpack-plugin');
const env = process.env.NODE_ENV;
let baseUrl = './';
if (env === 'test') {
  baseUrl = 'https://xyytest.oss-cn-beijing.aliyuncs.com/static/test001/';
} else if (env === 'production') {
  baseUrl = 'https://learn001.oss-cn-beijing.aliyuncs.com/static/test001/';
}
module.exports = {
  // 釋出檔案路徑
  publicPath: baseUrl,
  // 輸出檔案目錄名稱
  outputDir: process.env.outputDir,
  // 開發環境配置
  devServer: {
    open: true, // 啟動完成自動在浏覽器中打開項目
  },
  // 配置檔案 自動上傳oss
  configureWebpack: (config) => {
    console.log('test config=>', config);
    if (env === 'test' || env === 'production') {
      // 為c測試、生産環境修改配置...
      let webpackAliyunOss = [
        new AliyunossWebpackPlugin({
          buildPath: 'dist/**',
          region: 'oss-cn-beijing',
          accessKeyId: process.env.ossAccessKeyId,
          accessKeySecret: process.env.ossAccessKeySecret,
          bucket: env == 'test' ? 'xyytest' : 'learn001',
          generateObjectPath: (filename, file) => {
            //配置上傳位址
            return file.replace(/dist\//, '/static/test001/');
          },
        }),
      ];
      config.plugins = [...config.plugins, ...webpackAliyunOss];
    } else {
      // 為開發環境修改配置...
    }
  },
};
           

如何擷取ossAccessKeyId

如何擷取AccessKey ID和AccessKey Secret

建構部署測試環境

資源自動上傳到bucket的

xyytest

npm run build:test
           

建構部署生産環境

資源自動上傳到bucket的

learn001

npm run build:prod