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': ''
            }
        }
    },

第二种：

1.首先：

$通过为 .env 文件增加后缀来设置某个模式下特有的环境变量$
$通过传递 --mode 选项参数为命令行覆写默认的模式$

$在项目的根目录新建3个文件夹，分别对应开发（dev），测试（test），生产（prod）$ $文件命名： .env.dev , .env.test , .env.prod$

接下来是不同文件里面的代码情况，

.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		//正式环境打包