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"//生产环境启动 }, ```