# 打包与构建
# 环境模式和变量
对于打包来说,vue-cli内置两个不同的模式development
和production
。对于不同的模式,vue-cli
会决定是否输出sourcemap
文件等措施,以方便不同环境的开发与使用。
我们可以在根目录下定义不同的环境文件和环境变量,用于实现不同环境的打包要求
|-- project
|-- .env.development
|-- .env.production
在.env
文件中定义环境变量,自定义的环境变量必须以VUE_APP
开头
VUE_APP_API_BASE_URL=http://192.168.100.35:8888/
读取环境变量env.process.VUE_APP_API_BASE_URL
。
let BaseUrl = env.process.VUE_APP_BASE_URL
# publicPath
如果我们的项目不在服务器的根目录下,那么我们需要配置publicPath
。
比如,放在/root/exmaple/
下,需要配置publicPath:"/example/"
- 在根目录下新建
vue.config.js
文件,写入以下内容:
const vueConfig = {
publicPath:"/example/"
};
module.exports = vueConfig;
# 配置npm脚本
在
package.json
中,我们可以通过配置scripts
来让npm
执行不同的命令。
# 1. 指定环境模式
"build:all": "npm run build:stage && npm run build:prod",
"build": "vue-cli-service build --mode development --dest dev",
"build:prod": "vue-cli-service build --mode production --dest prod",
# 2. 实现压缩
通过vue-dist-compress打上时间戳,压缩成zip包
"build:prod": "vue-cli-service build --mode production --dest prod && compress prod",