Vue添加环境多环境

42次阅读

共计 1189 个字符，预计需要花费 3 分钟才能阅读完成。

注：本篇博客是基于 vue-cli 2.9.6 版本

vue-cli默认自带 production 和development两种开发环境，但是在实际工作中一般还有 测试环境 、 预发布环境 等，可以修改 package.json 添加新的打包命令，可以从而根据不同环境自动切换接口的 BASE_URL, 所以本篇文章将以添加 测试环境 为例，演示如何添加环境

项目的环境变量文件都在项目根目录下的 config 文件夹下，默认有两种环境变量文件, 即 dev.env.js 和prod.env.js, 我们直接复制生产环境的配置文件 prod.env.js, 将其名称改为test.env.js 并将其中的 NODE_ENV 属性修改为自己想要的环境名称，这里以 test 为例, 记得加引号

'use strict'
module.exports = {
  NODE_ENV: '"test"',
  BASE_URL:"XXXXXXXX"
}

在项目根目录下的 build 文件夹下，复制 build.js 文件，并改名为test.js, 并按以下进行修改

process.env.NODE_ENV = 'test'
const spinner = ora('building for test...') // 打包时的提示文本

在项目根目录下的 build 文件夹下，复制 webpack.prod.conf 文件，并改名为webpack.test.conf, 并按以下进行修改

const env = require('../config/test.env')

找到项目根目录下的 package.json 文件，在 scripts 属性中添加一条指令

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "test": "node build/test.js" // 新增
  }

使用新指令进行打包

使用新添加的命令 npm run test 进行测试环境的打包

F:\Project\CZ4.2>npm run test
> cz@1.0.0 test F:\Project\CZ4.2
> node build/test.js
\ building for test...{parser: "babylon"} is deprecated; we now treat it as {parser: "babel"}.
/ building for test...