@Vue/cli3.0 以上版本不同环境使用不同配置文件打包
一、在项目跟目录下新增配置配置文件(如果存在则不需要新建):
1、文件 .env ,该文件配置的内容不论什么环境打包都会生效
* 公共配置信息,根据自己需求添加
2、文件 .env.dev ,开发环境配置文件,内容:
NODE_ENV=development
VUE_APP_URL=127.0.0.1:8081
3、文件 .env.prod ,生产环境配置文件,内容:
NODE_ENV=production
VUE_APP_URL=127.0.0.1:8082
二、package.json 文件曾加下面红色文字内容:
{ "name": "vue-vant-ui", "version": "0.0.1", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "build:dev": "vue-cli-service build --mode dev", "build:prod": "vue-cli-service build --mode prod" },
至此,不同环境打包配置文件已经生效,对应打包命令:
npm run build:dev
npm run build:prod
打包命令红色部分对应 package.json 新增内容中的 key
三、其余地方如何使用配置文件中的配置,下面是vue.config.js中一些用到的地方,高亮显示,其余地方用法一致:
console.log('==================系统初始化,vue.config.js 配置文件开始加载=================='); const path = require('path'); function resolve (dir) { return path.join(__dirname, dir); } var targetUrl = 'http://localhost:8080'; if (process.env.VUE_APP_URL != undefined && process.env.VUE_APP_URL != '') { targetUrl = process.env.VUE_APP_URL; } console.log('targetUrl:' + targetUrl); module.exports = { publicPath: process.env.NODE_ENV === "production" ? "./" : "./", // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制) outputDir: "dist", // 运行时生成的生产环境构建文件的目录(默认''dist'',构建之前会被清除) assetsDir: "static", //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'') lintOnSave: true, // 是否开启eslint保存检测 productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap chainWebpack: (config) => { config.resolve.alias // 为指定目录设置全局别名 .set('@', resolve('src')) .set('@public', resolve('public')) }, devServer: { /* 本地ip地址 */ host: "localhost", port: "80", hot: true, /* 自动打开浏览器 */ open: false, overlay: { warning: false, error: true }, // 错误、警告在页面弹出 /* 跨域代理 */ proxy: { "/api": { /* 目标代理服务器地址 */ target: targetUrl , // /* 允许跨域 */ changeOrigin: true, ws: true, pathRewrite: { "^/api": "" } } //, // '/foo': { // target: '<other_url>' // } } // pluginOptions: {// 第三方插件配置 // // } } }; console.log('==================系统初始化,vue.config.js 配置文件加载结束==================');