1.找到環境變量配置文件，里面配置的文件實際上就是一個全局變量  # 開發環境配置： ``` # 頁面標題 VUE_APP_TITLE = 標題 # 開發環境配置 ENV = 'development' #開發環境 VUE_APP_BASE_API = '/dev-api' # 路由懶加載 VUE_CLI_BABEL_TRANSPILE_MODULES = true # 開發環境地址 VUE_APP_BASE_URL = '生產環境地址' ``` # 生產環境配置： ``` # 頁面標題 VUE_APP_TITLE = 標題 # 生產環境配置 ENV = 'production' # 生產環境 VUE_APP_BASE_API = '/prod-api' # 生產環境地址 VUE_APP_BASE_URL = '生產環境地址' ``` # 測試環境配置： ``` # 頁面標題 VUE_APP_TITLE = 標題 # 測試環境配置 ENV = 'staging' # 測試環境 VUE_APP_BASE_API = '/stage-api' # 測試環境地址 VUE_APP_BASE_URL = '生產環境地址' ``` `vue.config.js`配置代理： ``` "use strict"; const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } const name = process.env.VUE_APP_TITLE || "shukun"; // 網頁標題 const port = process.env.port || process.env.npm_config_port || 80; // 端口 module.exports = { publicPath: "./", // 在npm run build 或 yarn build 時 ，生成文件的目錄名稱（要和baseUrl的生產環境路徑一致）（默認dist） outputDir: "ROOT", // 用于放置生成的靜態資源 (js、css、img、fonts) 的；（項目打包之后，靜態資源會放在這個文件夾下） assetsDir: "static", // 是否開啟eslint保存檢測，有效值：ture | false | 'error' lintOnSave: false, // 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。 productionSourceMap: false, // webpack-dev-server 相關配置 devServer: { host: "0.0.0.0", port: port, open: false, //啟動后默認打開瀏覽器 true 打開 false 關閉 // 代理 proxy: { [process.env.VUE_APP_BASE_API]: { target: `http://localhost:8080`, changeOrigin: true, pathRewrite: { ["^" + process.env.VUE_APP_BASE_API]: "" } } }, disableHostCheck: true }, configureWebpack: { name: name, resolve: { extensions: ['.js', '.vue', '.json', '.ts'], alias: { "@": resolve("src") } } }, } ``` `packge.json`配置打包和啟動腳本 ``` "scripts": { "dev": "vue-cli-service serve",//默認開發環境啟動 "build": "vue-cli-service build --mode development",//開發環境打包 "build:stage": "vue-cli-service build --mode staging",//測試環境打包 "stage": "vue-cli-service serve --mode staging",//測試環境啟動 "preview": "node build/index.js --preview", "lint": "eslint --ext .js,.vue src", "build:prod": "vue-cli-service build --mode production",//生產環境打包 "prod": "vue-cli-service serve --mode production"//生產環境啟動 }, ```