vue2.0 根据不同环境配置编译不同包

1.项目安装cross-env。cross-env是node的一个设置和使用环境变量的脚本：npm install cross-env -D

2.在根目录的package.json文件中，把scripts对象的build字段的值改为以下代码。

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "cross-env env_config=prod node build/build.js",
    "build:test": "cross-env env_config=test node build/build.js",
    "build:pre": "cross-env env_config=pre node build/build.js",
    "build:report": "npm_config_report=true npm run build",
    "lint": "eslint --ext .js,.vue src",
    "test": "npm run lint",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },

代码说明：我们使用了cross-env脚本，新增了一个全局变量：env_config。后面根据这个全局变量的值，调用不同开发环境的变量值。调用方式：process.env.env_config。

3，修改控制台提示语句：在根目录的build/build.js文件内找到const spinner = ora('building for production...')这行代码，将其改为const spinner = ora('正在打'+process.env.env_config+'环境包...')，方便打包的时候知道正在打哪个环境的包。

4.在根目录的/config/prod.env.js文件内，为不同环境创建不同变量值。

prod: {
    NODE_ENV: '"production"',
    BASE_URL: '""',
    OUT_PUT: '../dist'
  },
  test: {
    NODE_ENV: '"test"',
    BASE_URL: '""',
    OUT_PUT: '../test'
  },
  pre: {
    NODE_ENV: '"pre"',
    BASE_URL: '""',
    OUT_PUT: '../pre'
  }

这里加了一个out_put变量，好在输出时生成不同的文件夹。在api文件里直接用process.env.BASE_URL获取变量

5.修改.env的访问地址，以调用对应环境的变量，在根目录的/build/webpack.prod.conf.js文件内改变下面的env值，根据env_config获取

plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env[process.env.env_config]
    }),

6、在config/index.js文件中改变output输出地址

build: {
    // Template for index.html
    index: path.resolve(__dirname, `${env[process.env.env_config].OUT_PUT}/index.html`),

    // Paths
    assetsRoot: path.resolve(__dirname, env[process.env.env_config].OUT_PUT),
    assetsSubDirectory: 'static',
}

7、执行npm run build:test 就可以打出不同环境的包了

vue2.0 根据不同环境配置编译不同包

猜你喜欢