vue-cli3 配置开发环境、测试环境、线上环境

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

001、在package.json文件中添加

"scripts": {
    "serve": "vue-cli-service serve", //调用开发api
    "build": "vue-cli-service build", //上线
    "test": "vue-cli-service build --mode test",//需要添加的内容，测试
},

002、在根目录下创建.env.production文件，并配置(这是生产环境配置文件)

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  

转载：https://blog.csdn.net/qq_37055675/article/details/85047451

以上是 vue-cli3 配置开发环境、测试环境、线上环境 的全部内容， 来源链接： utcz.com/z/380585.html

回到顶部