风车 | 前端同一构建平台

# 打包与构建

# 环境模式和变量

对于打包来说，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/"

  1. 在根目录下新建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",

更多