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')
}),