Vue cli3 打包build 区分测试环境和正式环境
第一种：
比较简单的方法，没有过多的配置，主要是打包时，简单区分开发环境（development）和发布环境（production）请求的URL
util/baseUrl.js
let baseUrl= ""; //这里是一个默认的url，可以没有
switch (process.env.NODE_ENV) {
case 'development':
baseUrl = "http://192.168.1.105:8080/admin/v1/" //开发环境url
break
case 'production':
baseUrl = "https://www.baidu.com/admin/v1/" //生产环境url
break
}
export default baseUrl
main.js
import baseUrl from './util/baseUrl.js'
import axios from 'axios'
axios.defaults.baseURL= baseUrl;// 设置请求根路径
如果要修改打包后的文件名，则修改vue.config.js 中的outputDir: '你想要的文件名'即可
vue.config.js
module.exports = {
publicPath: './', // 相对于 HTML 页面（目录相同）部署应用包时的基本 URL
outputDir: 'My-admin',//生成的生产环境构建文件的目录 ,默认是dist
// assetsDir:'',//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
// indexPath:'index.html',// 指定生成的 index.html 的输出路径 (相对于 outputDir)
// filenameHashing:true,//生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,false 来关闭文件名哈希
devServer: {
port: 8080,
// host:'localhost',
// open:true, //浏览器自动访问
contentBase: 'src',//指定托管的根目录
hot: true,//启动热更新 第一步webpack只用这一步
// proxy: 'http://192.168.1.104:8080' //代理
proxy: {
'/admin/v1': {
//代理
target: 'http://192.168.1.104:8080/', //API服务器的地址
// ws: true, //代理websockets
changeOrigin: true,//设置true 代表跨域访问
// secure: false, // 如果是https接口，需要配置这个参数
// pathRewrite: {
//重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
// '^/api': ''
}
}
},
第二种：
通过自定义环境变量文件进行配置，注意！文件名.env前面有个点
1、环境变量文件只包含环境变量的“键=值”对，
2、只有VUE_APP_开头的环境变量可以在项目代码中直接使用
3、两个特殊值需要注意：
NODE_ENV- 值为development/production/test中的一个，具体的值取决于应用运行的模式。BASE_URL- 值和vue.config.js中的publicPath选项相符，即你的应用会部署到的基础路径。
具体配置文件说明
.env 无论开发环境还是生产环境都会加载的配置文件
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件
.env.dev
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地开发api地址'
需要打包的线上环境
.env.prod（生产环境）
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '线上正式环境api地址'
.env.test （测试环境）
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = '线上测试环境api地址'
2.修改package.json脚本：
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build --mode production",
"build:test": "vue-cli-service build --mode test"
}
3.最后总结：
npm run dev //本地运行
npm run build:prod //正式环境打包
npm run build:test //测试环境打包
参考：
让你秒懂 Vue .env .env.development .env.production
vue cli3 打包——同时打包生成 dist 和 test 两个构建文件的目录