How to deploy Vue3 project to Nginx in the production environment?


This paper mainly describes four important parts of Vue3 project life cycle:

  • Vue3 project creation
  • Development and commissioning of Vue3 project
  • How do Vue3 projects differentiate between development / test / production environments
  • How do Vue3 projects build deployments

These four parts are passed Vue Cli Implementation of.

Vue3 project creation

Using Vue CLI, you can easily generate the project template of Vue3, commonly known as "scaffold":

vue create hello-world

Execute the command, and the option prompt appears:

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

You can use the keyboard direction keys to select the Vue version. Here, use the default Vue3 and press enter to start creating the project.

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

 $ cd hello-world
 $ npm run serve

The above information indicates that the project is created successfully.

Hello world is the project name, which will be used to generate the corresponding project folder, which contains multiple project files:


Vue Cl
For the description of project document structure, please refer to: VueJS 3 – Project Structure.

Development and commissioning of Vue3 project

A simple example of a project created using Vue CLI will be included in the project folder:

cd hello-world

Execute command:

npm run serve

A development server running project will be started:

 DONE  Compiled successfully in 4049ms                                                                                                                                          12 pm:51:35

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

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

Access with browser http://localhost:8080/ , you can see the sample page.

Sometimes we may see different running commands, such as npm run dev. why?

In fact, the composition format of the command npm run should be:

npm run [script]

Script can be understood as the script name. serve or dev is just the script name. npm run essentially executes the script corresponding to the script name.

The script name and the corresponding script are defined in the project package JSON file:

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

It can be seen that the vnpserve script actually executes:

vue-cli-service serve The command starts a development server (be based on webpack-dev-server) It also comes with module thermal overload out of the box (Hot-Module-Replacement). 
  • Development server
    Run project during project development
  • Module thermal overload
    In the process of project development, it is not necessary to restart the development server manually most of the time; When the project changes, the development server will automatically reload and the page will refresh automatically.

Vue Cli service is the command of Vue Cli. You can refer to: vue-cli-service serve.

How do Vue3 projects differentiate between development / test / production environments

Vue Cli support Mode and environment variables , different patterns correspond to different environment variables. By default, the following three modes are built in:

  • development
    Development mode: the development mode is used by default when using the command Vue cli service serve;
  • test
    Test mode: when using the command Vue cli service test: unit, the test mode is used by default;
  • production
    Production mode: the production mode is used by default when using the command Vue cli service build or Vue cli service test: E2E;

When using the above command, if you need to use other modes, you can specify them through the parameter -- mode.

Each mode corresponds to a set of environment variables, which will be automatically loaded from the environment file of the corresponding mode when running the command. The format of the environment file name is required:


Where mode is the name of the mode. The environment file needs to be placed in the project root directory.

. env is used to configure common environment variables.
The mode name supports customization.

Environment variables support the following three types:

  • VUE_APP_ Variable at the beginning

NODE_ENV has a great impact on the construction and operation of applications (refer to the official website). Its value depends on the mode. For the three built-in modes:

  • Mode: development, NODE_ENV: development
  • Mode: test, NODE_ENV: test
  • Mode: production, NODE_ENV: production

Other modes, node_ The value of Env comes from the environment file of the mode; If node is not configured in the environment file_ Env, then NODE_ENV is development.

Use environment variables in your code:


How do Vue3 projects build deployments

Project construction

Before deploying a Vue3 project, you need to build the project into a deployable application and execute the command in the root directory of the project:

npm run build

The following prompt message appears:

 DONE  Compiled successfully in 7008ms                                                                                                                                           5 pm: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

Indicates that the project construction is complete. The built application is located in the dist folder of the project root directory:


Project deployment

The built application can be deployed to the Web server. Take Nginx as an example.

Create a deployment directory (/ TMP / Hello World) and copy all files in dist folder to the deployment Directory:

mkdir -p /tmp/hello-world

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

Configure Nginx:

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


The deployment directory of the application.


The default request page for the application. For a single page application that has been built, there is only one index HTML page file.


Vue3 officially recommends the use of the routing library Vue Router, which supports a variety of routes Routing mode , recommended HTML5 mode . There is a problem to pay attention to when using this mode:

Suppose there is a route in the application:/activity: As mentioned earlier, the application deployment directory contains only one index.html Documents; If you use a browser to access directly http://localhost/activity. Because there is no page file named activity in the application deployment directory, 404 will be prompted.

In this case, we need to have Nginx redirect the request to / index HTML, whose internal routing policy knows how to handle / activity requests.

Restart Nginx:

nginx -s reload

Application deployment completed.

@Cute cat's father, Internet practitioner / Big Data Architect / full stack developer

  • Blog
  • Github @leaderman
  • micro-blog @Cute cat his father (Zhihu / xiaohongshu /...)
  • Official account @ deep sea
  • Micro signal @ meetuagent

Keywords: Nginx Vue Vue.js

Added by blmg911 on Mon, 07 Mar 2022 14:08:29 +0200