Vue cli3 打包build 区分测试环境和正式环境
第一种:
- 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
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': ''
}
}
},
第二种:
1.首先:
接下来是不同文件里面的代码情况,
.env.dev
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地开发api地址'
.env.test
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = '测试环境api地址'
.env.prod
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '正式环境api地址'
2.修改package.json 脚本:
3.最后总结:
npm run dev //本地运行
npm run build:test //测试环境打包
npm run build:pro //正式环境打包