为生产环境构建代码
应用部署的流程
- 构建 Javascript 语言本身是不需要编译的。 但是现代的前端项目使用的语言和或者的模块系统都无法在浏览器中使用，都需要使用特定的 bundler 将源代码最终转换为浏览器支持的 Javascript 代码。
- 不同的环境
- 生产环境 （production）
- 开发环境 （development）
- 测试环境（test 或者 staging）
- 生产和开发环境的 区别
- 开发环境
- 会添加丰富的错误提示
- 可以使用 mock server 或者本地后端环境
- 添加各种便利的功能 - 比如 hot reload，自动刷新
- 不太关心静态资源的大小，最好提供最丰富的调试信息 （sourcemap） 等。
- 生产环境
- 稳定是最重要的原则
- 速度是第一要务
- 生产环境和测试环境的区别
- 高度相似
- 使用的后端服务不一样
各种框架对不同环境的天生适配
- Vue
- React
- https://zh-hans.reactjs.org/docs/optimizing-performance.html
- 异曲同工，create-react-app 也支持不同命令采用不同版本的 React
Vue Cli 提供的内置的 build 命令
文档地址：https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-build
// 查看所有命令
npx vue-cli-service help
// 查看具体一个命令的选项
npx vue-cli-service help build
Vue Cli 的模式
文档地址：https://cli.vuejs.org/zh/guide/mode-and-env.html#模式
- development 模式用于 vue-cli-service serve
- test 模式用于 vue-cli-service test:unit
- production 模式用于 vue-cli-service build
模式将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种对不同环境优化过的 webpack 配置。
test 模式，Vue CLI 会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。
development 模式 会创建一个 webpack 配置，该配置启用热更新，不会对资源进行 hash 也不会打出 vendor bundles，目的是为了在开发的时候能够快速重新构建。
- 当运行 vue-cli-service 的时候，它会根据不同的命令，设置对应的模式，模式对应的是一个环境变量，它是一个 Nodejs 项目中通用的值，称之为 NODE_ENV
在运行命令的时候设置环境变量的工具：cross-env 文档地址：https://github.com/kentcdodds/cross-env
环境变量文件
https://cli.vuejs.org/zh/guide/mode-and-env.html#环境变量 在你的项目根目录中放置下列文件来指定环境变量
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
一个环境文件只包含环境变量的“键=值”对：
FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value
不要在你的应用程序中存储任何机密信息（例如私有 API 密钥）！
环境变量的优先级 cross-env > .env.[mode] > 运行时默认的 mode
源代码到浏览器运行的过程 编译阶段（webpack） -> 浏览器运行（客户端）
（所有的环境变量都可用）-> (只有特殊的环境变量可用，使用特殊的变量名称)
在客户端使用环境变量
- VUE_APP_ 开头的变量
- NODE_ENV ： 当前使用的模式
- BASE_URL ： 部署到的基础路径
运行方式
在构建过程中，process.env.VUE_APP_ 开头的变量 都将会被相应的值所取代。在 VUE_APP_Foo=foo 的情况下，它会被替换为 “foo”。
它的底层是使用 webpack 的 definePlugin 来完成向编译后的代码注入环境变量的任务的，后面介绍插件的时候会说到，文档地址：https://webpack.js.org/plugins/define-plugin/
Copyright © 2022 @filway