Vue3 项目生产环境下如何部署到 Nginx ？

导语

本文主要描述 Vue3 项目生命周期中比较重要的四部分内容：

• Vue3 项目的创建
• Vue3 项目的开发调试
• Vue3 项目如何区分开发/测试/生产环境
• Vue3 项目如何构建部署

这四部分内容都是通过 Vue Cli 实现的。

Vue3 项目的创建

使用 Vue CLI 可以很方便的生成 Vue3 的项目模板，俗称“脚手架”：

vue create hello-world

执行命令，出现选项提示：

Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

可以使用键盘方向键选择 Vue 版本，这里使用默认 Vue3，回车开始创建项目。

🎉  Successfully created project hello-world.
👉  Get started with the following commands:

 $ cd hello-world
 $ npm run serve

出现如上信息，表示项目创建成功。

hello-world 是项目名称，会使用该名称生成相应的项目文件夹，内部包含多个项目文件：

hello-world/

    README.md
    babel.config.js
    jsconfig.json
    node_modules
    package-lock.json
    package.json
    public
    src
    vue.config.js

Vue Cl
项目文件结构说明可以参考：VueJS 3 – Project Structure。

Vue3 项目的开发调试

使用 Vue CLI 创建的项目会自带有一个简单示例，进入项目文件夹：

cd hello-world

执行命令：

npm run serve

会启动一个开发服务器运行项目：

 DONE  Compiled successfully in 4049ms                                                                                                                                          下午12:51:35


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.110:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

使用浏览器访问 http://localhost:8080/，就可以看到示例页面。

有时候我们可能会看到不一样的运行命令，比如：npm run dev，这是为什么？

实际上，命令 npm run 的组成格式应为：

npm run [script]

script 可以理解为脚本名称，serve 或者 dev 只是脚本名称，npm run 本质是执行脚本名称对应的脚本。

脚本名称和对应的脚本被定义在项目的 package.json 文件中：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

可以看出，npm run serve 实际执行的脚本命令是 vue-cli-service serve：

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

• 开发服务器
  项目开发时运行项目
• 模块热重载
  项目开发过程中，大部分时候不需要手动重启开发服务器；项目变动时，开发服务器会自动完成重新加载，页面也会自动刷新。

vue-cli-service 是 Vue Cli 的命令，可以参考：vue-cli-service serve。

Vue3 项目如何区分开发/测试/生产环境

Vue Cli 支持 模式和环境变量，不同的模式对应着不同的环境变量。默认情况下，内置以下三种模式：

• development
  开发模式，使用命令 vue-cli-service serve 时默认使用开发模式；
• test
  测试模式，使用命令 vue-cli-service test:unit 时默认使用测试模式；
• production
  生产模式，使用命令 vue-cli-service build 或 vue-cli-service test:e2e 时默认使用生产模式；

使用上述命令时，如果需要使用其它的模式，可以通过参数 --mode 指定。

每一种模式都对应着一组环境变量，运行命令时会自动从相应模式的 环境文件 中加载，环境文件名称格式要求：

.env.[mode]

其中，mode 为模式名称。环境文件需要放置在项目根目录中。

.env 用于配置通用的环境变量。
模式名称支持自定义。

环境变量支持以下三种：

• NODE_ENV
• BASE_URL
• 以 VUE_APP_ 开头的变量

NODE_ENV 对应用的构建运行有较大影响（参考官网），它的值取决于模式，对于内置的三种模式：

• 模式：development，NODE_ENV：development
• 模式：test，NODE_ENV：test
• 模式：production，NODE_ENV：production

其它模式，NODE_ENV 的值来源于模式的环境文件；如果环境文件中没有配置 NODE_ENV 的值，则 NODE_ENV 为 development。

在代码中使用环境变量：

process.env.NODE_ENV
process.env.BASE_URL
process.env.VUE_APP_SECRET

Vue3 项目如何构建部署

项目构建

Vue3 项目部署之前，需要先将项目构建成可以部署的应用程序，在项目根目录内执行命令：

npm run build

出现以下提示信息：

 DONE  Compiled successfully in 7008ms                                                                                                                                           下午5:08:48

  File                                 Size                                                                     Gzipped

  dist/js/chunk-vendors.07827a19.js    72.69 KiB                                                                27.19 KiB
  dist/js/app.eae9c148.js              13.10 KiB                                                                8.44 KiB
  dist/css/app.2cf79ad6.css            0.33 KiB                                                                 0.23 KiB

  Images and other types of assets omitted.
  Build at: 2022-03-07T09:08:48.312Z - Hash: ce50ca3dd72b5756 - Time: 7008ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

表示项目构建完成。构建完成的应用程序位于项目根目录的 dist 文件夹内：

dist/
    css
    favicon.ico
    index.html
    js

项目部署

构建完成的应用程序可以部署至 Web 服务器中，这里以 Nginx 为例。

创建部署目录（/tmp/hello-world），将 dist 文件夹内的所有文件全部拷贝至部署目录：

mkdir -p /tmp/hello-world

cp -R ./dist /tmp/hello-world

配置 Nginx：

location / {
    root /Users/yurun/workspace/meetu/website/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
}

root

应用程序的部署目录。

index

应用程序的默认请求页。对于构建完成单页面应用程序而言，仅有一个 index.html 页面文件。

try_files

Vue3 官方推荐使用路由库 Vue Router，它支持多种路由模式，推荐使用 HTML5 模式。使用这种模式需要注意一个问题：

假设应用内存在一个路由：/activity：如前文所述，应用部署目录内仅包含一个 index.html 文件；如果使用浏览器直接访问 http://localhost/activity，因为应用部署目录内并不存在名称为 activity 的页面文件，因此会提示 404。

类似这种情况，我们需要让 Nginx 内部将请求重定向至 /index.html，它内部的路由策略知道如何处理 /activity 请求。

重启 Nginx：

nginx -s reload

应用部署完成。

@萌猫他爸，互联网从业者/大数据架构师/全栈开发者

• Blog
• Github @leaderman
• 微博 @萌猫他爸（知乎/小红书/...）
• 公众号 @渊深海阔
• 微信号 @meetuagent