Vue 打包相关

Vue 打包相关

vue-cli-service build#

用法：vue-cli-service build [options] [entry|pattern]

选项：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录的内容
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

• vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。

• 这里还有一些有用的命令参数：

• --modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。

• --target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

• --report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

一个简单的配置

"scripts": {
    "start": "npm run serve",
    "serve": "vue-cli-service serve --mode dev",
    "build-prd": "vue-cli-service build --mode prd",
    "build-test": "vue-cli-service build --mode test",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint --fix"
},

添加condig 文件

• .env.dev

NODE_ENV = development
VUE_APP_ONLINE_ENV = dev

• .env.test

NODE_ENV = production
VUE_APP_ONLINE_ENV = test

• .env.prd

NODE_ENV = production
VUE_APP_ONLINE_ENV = prd

读取

process.env.NODE_ENV
process.env.VUE_APP_ONLINE_ENV

注

• -—mode后面添加test、production 等预留参数无效
• 配置文件内，参数添加VUE_APP 可通过调试