001、在package.json文件中添加
"scripts": { "serve": "vue-cli-service serve", //调用开发api "build": "vue-cli-service build", //上线 "test": "vue-cli-service build --mode test",//需要添加的内容,测试 },
002、在根目录下创建.env文件,并配置
NODE_ENV = 'production' VUE_APP_FLAG = 'pro' //vue代码可以直接使用VUE_APP_名字
003、在根目录下创建.env.test文件
NODE_ENV = 'production' VUE_APP_FLAG = 'test' outputDir = test //可以更改打包时输出的目录名字,默认为dist
004、在根目录下创建vue.config.js
module.express = { baseUrl: process.env.NODE_ENV === 'production' ? '/static/' : './', devServe: { port: 8080, // disableHostCheck:true,//处理host不识别问题 }, baseUrl: '/', //基本路径,不要随意更改 outputDir: process.env.outputDir, // 打包生成目录 assetDir: 'static', lintOnSave: false, runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本 productionSourceMap: false, // 生产环境的 source map }
005、在main.js里配置api变量
/*第一层if判断生产环境和开发环境*/ if (process.env.NODE_ENV === 'production') { /*第二层if,根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/ if (process.env.VUE_APP_FLAG === 'pro') { //production 生产环境 axios.defaults.baseURL = 'http://api.xinggeyun.com';//路径 } else { //test 测试环境 axios.defaults.baseURL = 'http://192.168.0.152:8102';//路径
} } else { //dev 开发环境 axios.defaults.baseURL = 'http://192.168.0.152:8102';//路径
}
最后npm run test 或者 yarn run test
ps:我用了outputDir = test,但是打包后仍然是dist默认文件名。不知道原因,如果有知道的,麻烦分享一下
最后,希望对你有所帮助!!
原文:https://blog.csdn.net/qq_37055675/article/details/85047451 可以参考:https://juejin.im/post/5c63afd56fb9a049b41cf5f4