vue打包详情
说明
本文代码中的配置基于vue-cli2
需求
在实际开发中我们可能有测试环境一套请求API 和 正式环境一套API,尤其是两个环境的域名不同时,就需要我们分环境打不同配置的包
了解 webpack.DefinePlugin 插件
DefinePlugin 此插件可以在打包时定义环境变量,在开发时我们也能在代码中获取定义的环境变量。
用法:
单独配置
plugins: [
new webpack.DefinePlugin({
'process.env.mode': '"development"'
})
...
]
写成对象
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
EVN_CONFIG: '"dev"',
API_ROOT: '"dev API_ROOT"'
}
})
...
]
写成配置文件
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
})
...
]
// /config/dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
EVN_CONFIG: '"dev"',
API_ROOT: '"dev API_ROOT"'
})
在vue-cli2 中/build/webpack.dev.conf.js
文件引用了 /config/dev.env.js
文件的配置作为环境变量,因此我们执行npm run dev
时(执行/build/webpack.dev.conf.js
)就可以在我们开发代码中获得环境变量(console.log(process.env)
试一试)
然后我们观察/build/webpack.prod.conf.js
(npm run build时执行)
// /build/webpack.prod.conf.js
const env = require('../config/prod.env')
...
new webpack.DefinePlugin({
'process.env': env
}),
可见打包时使用的是/build/webpack.prod.conf.js
文件配置作为环境变量
安装 cross-env
npm install --save-dev cross-env
cross-env 统一了不同操作系统设置环境变量的方式.
用法:
"scripts": {
"build": "node build/build.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js", //设置了环境变量 NODE_ENV 和 env_config
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", //设置了环境变量 NODE_ENV 和 env_config
}
开始配置
由上面分析,我们得到,要分环境打包,我们针对不同的环境去配置不同的环境变量就可以了。
我们先修改scripts脚本
// package.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
我们设置了两个环境变量 NODE_ENV
和 env_config
然后执行正常的打包。这里的环境变量设置是方便我们在webpack配置文件中使用
新建环境变量文件
新建 在/config
目录下新建test.env.js
文件存放test的环境变量
// /config/test.env.js
'use strict'
module.exports = {
NODE_ENV: '"testing"',
EVN_CONFIG:'"test"',
API_ROOT:'"/test/apis/v1"'
}
修改 webpack.prod.config.js
我门注释掉
//const env = require('../config/prod.env')
修改成
//const env = require('../config/prod.env')
const env_config = process.env.env_config || ''; //执行不同的打包脚本对应不同的env_config值
switch (env_config){
case 'test':
var env= require('../config/test.env');
break;
case 'prod':
var env= require('../config/prod.env');
break;
default:
var env= require('../config/prod.env');
}
...
在代码中使用
// Home.vue
axios.get(process.env.API_ROOT) ...
在不同环境中使用CDN
webpack 提供一个非常有用的配置,该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)
我们修改webpack中的 publicPath 来让资源引用地址改为cdn
观察vue-cli我门发现publicPath写在了 /config/index.js
文件的build对象中,所以我们修改如下
...
const testCDN = 'https://testcdn.com';
const prodCDN = 'https://prodcdn.com';
build: {
assetsPublicPath: process.env.env_config=='test'?testCDN:prodCDN
}
也可以将cdn地址统一写在上文中的环境配置文件中
var prodEnv = require('./prod.env');
var testEnv = require('./test.env');
...
build: {
assetsPublicPath: process.env.env_config=='test'?testEnv.FILE_CDN:prodEnv.FILE_CDN,
}
总结
整体思路就是建不同的打包脚本,然后根据不同的打包脚本,应用相应的环境变量配置文件
最新文章
- Python实用环境pyenv搭建教程
- File控件选择图片的时候在Html5下马上预览
- 自己用node.js 搭建APP服务器,然后用AFNetworking 请求 报如下错误:App TransportSecurity has blocked a cleartext HTTP (http://) resource load since it isinsecure. Temporary exceptions can be configured via your app's Info.
- DIOCP之获取在线用户列表
- android Android-PullToRefresh 下拉刷新
- HNOI2006-公路修建问题(二分答案+并查集)
- C/c++笔试经典程序(一)
- C#中对象的输出
- [大牛翻译系列]Hadoop系列性能部分完结
- C#与C++相比较之STL篇
- 针对苹果最新审核要求为应用兼容IPv6-备用
- git基础命令
- php 获取汉字拼音首字母的函数
- go-fasthttp源码分析
- Git远程库版本回滚
- Leetcode_21_Merge Two Sorted Lists
- HTML解析之BeautifulSoup
- 安装haproxy和haproxy命令
- Python import语句导入模块语法[转]
- js对象与字符串的想到转换
热门文章
- Java基础学习(1)
- 图解Qt安装(Linux平台)
- 洛谷 P2704 [NOI2001]炮兵阵地 (状态压缩DP+优化)
- const定义的并非是常量,而是常量索引
- 如何删除Github上的仓库
- Django【第14篇】:Django之Form组件补充
- Spring Boot整合tk.mybatis及pageHelper分页插件及mybatis逆向工程
- java -cp与java -jar的区别
- flask_session
- java: Set类及子类:TreeSet有序子类,HashSet无序子类:重复元素