有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue-cli-service build –mode(vue项目配置生产模式)开发模式和测试模式

vue 炮渣日记 2周前 (11-16) 23次浏览 已收录 0个评论 扫描二维码
在我们日常的开发过程中生产模式和测试等的接口地址是不一样的;所以我们就需要配置开发环境和测试环境还有生产环境;便于我们日常开发的使用;

第一步:在项目的根目录创建以下的三个文件

vue-cli-service build --mode(vue项目配置生产模式)开发模式和测试模式

第二步:

  • .env.development(开发环境)
NODE_ENV = 'development'  //模式
VUE_APP_MODE = 'development'  // 用来区分环境
  • .env.test(测试环境)
NODE_ENV = 'production'
VUE_APP_MODE = 'test'
outputDir = test
  • .env.production(生产环境)
NODE_ENV = 'production'
VUE_APP_MODE = 'production'

第三步:对vue.config.js添加一下代码;如果没有这个文件就在根目录下创建一个文件即可

module.exports = {
    // 基本路径,相对路径
    publicPath: "./",
    // 输出文件目录
    outputDir: process.env.outputDir,
}

第四步:在package.json 中的 scripts 中复制一下代码使用即可

    "test": "vue-cli-service build --mode test", //打包测试环境
    "publish": "vue-cli-service build && vue-cli-service build --mode test", //测试和生产一起打包

做到这儿的时候;基本上就配置完成了;重启一下项目即可

然后在需要引入接口地址的地方输入

process.env.VUE_APP_MODE

根据这个可以看到目前是什么环境;然后配置接口地址就好了

const env = process.env.VUE_APP_MODE

if (env === 'development') {
  envConfig = require('./dev').default  
} else if (env === 'test') {
  envConfig = require('./test').default
} else {
  envConfig = require('./prod').default
}

require(‘./test’).default ;表示的是一个文件代码;

vue-cli-service build --mode(vue项目配置生产模式)开发模式和测试模式

如果这个没明白的话;可以这样理解;在判定是哪个环境以后就把对应的文件里面的代码拿过来也就是

vue-cli-service build --mode(vue项目配置生产模式)开发模式和测试模式

现在就配置成功了;

npm run build  // 打包
npm run test // 测试打包
npm run publish // 测试和生产一起打包
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址