vue-10-cli2多环境配置

vue.cli已经更新到了4.x版本了，但是因为之前的项目还是基于2.x版本的，所以需要了解一下vue-cli 2.x.x 的配置使用

我的项目是 vue -- 2.5.2    webpack -- 3.6.0 

webpack 版本 到了 3.0以上之后 ，构建的项目结构中，在build文件夹中删去了dev_server.js 和 dev_client.js 文件，

 1、初始项目构建完成之后，目录结构比较简单，而且只区分了本地环境和线上环境，但是如果我们还需要测试环境，预发环境，那就需要自己进行配置

2、安装依赖：cross-env   是运行跨平台设置和使用环境变量的脚本，使用cross-env解决跨平台设置环境变量的问题

npm i --save-dev cross-env

3、修改项目package.json文件 

如果需要设置多个环境，那么需要先修改 package.json ，创建所需环境的运行脚本

build命令都是新建的打包命令

通过  cross-env  插件，运行跨平台设置，和 使用不同的环境变量，NODE_ENV 、ENV_CONFIG 都属于环境变量

NODE_ENV=xxx 、ENV_CONFIG=xxx 将设置 webpack 打包时的 NODE_ENV、 ENV_CONFIG 环境变量，可以通过这些环境变量去对系统代码做一些权限操作之类的

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:dev": "cross-env NODE_ENV=development ENV_CONFIG=dev node build/build.js",
    "build:test": "cross-env NODE_ENV=test ENV_CONFIG=test node build/build.js",
    "build:pre": "cross-env NODE_ENV=pre ENV_CONFIG=pre node build/build.js",
    "build:pro": "cross-env NODE_ENV=pro ENV_CONFIG=pro node build/build.js"
  },

ps ：我的理解是，运行脚本的时候，会自动找到脚本的运行环境，也就是下面一步添加的脚本文件，然后将脚本文件内部的环境变量打包到项目中，最后启动项目，所以，项目中最终使用的环境变量，其实是下面配置的脚本文件中 设置的环境变量 

3、修改项目config配置文件

添加了不同环境的运行脚本，对应的，也需要添加不同环境脚本运行的配置文件。这里的环境变量

3.1、 添加test.env.js文件

'use strict'

module.exports = {
  NODE_ENV: '"test"',
  ENV_CONFIG: '"test"',
  API_ROOT: '"http://(测试环境请求地址)"'
};

3.2、 添加pre.env.js文件 

'use strict'

module.exports = {
  NODE_ENV: '"pre"',
  ENV_CONFIG: '"pre"',
  API_ROOT: '"http://(预发环境请求地址)"'
};

3.3、 修改 dev.env.js文件  

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  API_ROOT: '"http://(本地环境请求地址)"'
});

3.4、 修改 prod.env.js文件  

'use strict'

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"production"',
  API_ROOT: '"http://(正式环境请求地址)"'
};

3.5、修改index.js 文件

因为本地运行，可能产生跨域等问题，所以，修改，index.js文件中 的 dev 属性下的  proxyTable 对象

    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/finance': { // finance，就是当前接口的变量
        target: 'http://192.168.152.xxx:9001',  // target: 'http://(本地开发环境请求地址)',
        secure: false,
        changeOrigin: true,  // 是否允许跨域
        pathRewrite: {'^/finance': '' // 重写  finance这个字段和上面的保持一致即可}
      },
      '/uploadImage': {
        target: 'http://192.168.152.xxx:6001',
        secure: false,
        changeOrigin: true,
        pathRewrite: {'^/uploadImage': ''}
      }
    },

在 build 属性下 添加 如下参数，参数名与文件名对应，此处参数将在 build/webpackage.prod.conf.js 中使用到。

ps ： 先将 build 参数下的 assetsPublicPath 参数值修改为 ’./’，避免打包之后，页面显示空白，静态资源加载路径出错

devEnv: require('./dev.env'),
testEnv: require('./test.env'),
preEnv: require('./pre.env'),
prodEnv: require('./prod.env'),

4、修改项目build配置文件

process.env.NODE_ENV、process.env.ENV_CONFIG：就是 packjson 文件中运行脚本配置的环境变量，有的项目只配置了一个NODE_ENV环境变量，有的项目配置了多个 环境变量，这里可以不用写全。

// process.env.NODE_ENV = 'production'  // 将此行代码注释

// const spinner = ora('building for production...')
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.ENV_CONFIG + ' production...')

5、修改webpack.prod.conf.js文件

// 源代码
// const env = require('../config/prod.env')

// 修改之后的代码  其实两种写法效果是一样的，一个是直接取得变量，一个是直接引入文件中的变量
// const env = config.build[process.env.ENV_CONFIG + "Env"];
const env = require("../config/" + process.env.ENV_CONFIG + ".env");

6、打包的时候区分环境，打包不同的包名

修改 config 文件夹中的 index.js 文件 ps：经过测试，这个包名的变量使用的是 packjson 文件中，脚本命令中设置的 全局变量

// 在文件名中加入环境变量，打包出来的包名就是 dist_test、dist_pre、dist_prod 
let dist = '../dist_'+process.env.env_config+''


// 然后在 build 对象中，将之前的 index 属性中的 dist  替换，这样，打包的文件，访问的首页，
//也是dist_test/index.html、dist_pre/index.html、dist_prod/index.html，更容易区分当前环境
index: path.resolve(__dirname, dist + '/index.html'),

//  同理，将 assetsRoot: path.resolve(__dirname, "../dist"), 也进行替换
assetsRoot: path.resolve(__dirname, dist),

所以，为了统一，建议将 packjson 文件中的 脚本命令中设置的环境变量，和 config配置文件 中的 不同的环境文件中的环境变量取名一致

7、打包文件

当我执行了 npm run build:dev   这个脚本之后，第六步中的配置开始生效，打包出来的文件夹名称就是 dist_当前环境

 8、打包之后，使用  http-server  本地运行项目

http-server：是一个轻量级的基于nodejs的http服务器，它最大好处就是可以使任意一个目录成为服务器的目录，完全抛开后台的沉重工程，直接运行想要的js代码。

8.1、开启一个终端，cd 到 当前包的路径

8.2、运行命令 http-server -c-1 

http-server       // 不禁用缓存

http-server -c-1  // 禁用缓存

8.3、当项目运行成功之后，可以看到 会出现一个本地网址，通过这个网址，就可以访问项目。通过不同的包，可以访问不同的环境的项目，进行本地调试的时候，不必依赖运维部署。

 

 

9、运行项目

执行脚本 npm start 即可运行项目

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:dev": "cross-env NODE_ENV=development ENV_CONFIG=dev node build/build.js",
    "build:test": "cross-env NODE_ENV=test ENV_CONFIG=test node build/build.js",
    "build:pre": "cross-env NODE_ENV=pre ENV_CONFIG=pre node build/build.js",
    "build:pro": "cross-env NODE_ENV=pro ENV_CONFIG=pro node build/build.js"
  },

通过脚本可以看出，其实执行的是  build/webpack.dev.conf.js  这个文件的配置 ，深入该文件，可以看到这样一句代码

new webpack.DefinePlugin({
   'process.env': require('../config/dev.env')
}),

这个其实就是代表当前运行的是哪个环境， webpack.DefinePlugin 这个属性是 webpack 配置的属性，允许创建一个在编译时可以配置的全局常量。具体情况可以参考 webpack 中文网 https://www.webpackjs.com/plugins/define-plugin/

ps ：如果需要在本地项目运行时，连接测试、预发、线上的环境，用来调试，那么需要将这个配置进行更改。

其实也就是，当我需要连接哪个数据库，我就把 config 文件夹中的 脚本文件引入，脚本文件内部对于不同的环境，肯定配置了不同的数据库地址，所以项目在编译的时候，就会找到对应的 脚本文件，获取脚本文件中的 全局变量

// 本地连接 测试数据库
new webpack.DefinePlugin({
   'process.env': require('../config/test.env')
}),

// 本地连接 预发数据库
new webpack.DefinePlugin({
   'process.env': require('../config/pre.env')
}),

// 本地连接 正式数据库
new webpack.DefinePlugin({
   'process.env': require('../config/prod.env')
}),