Project packaging and online deployment

What is the default port number: 80

To build the project run the command package.json of

Every time it runs, a dist file will be generated in the root directory of the project. If there is one, delete and recreate it.

Local simulation online/test

Use nginx to simulate the production environment

is a high-performance HTTP and reverse proxy web server

Note that the path where nginx is located on your own computer cannot use Chinese

2. After modifying the configuration file (nginx.conf), be sure to restart nginx

3. Don't double-click multiple times, as long as there are two nginx in the task manager. When ending nginx, right-click to end which of the following (subprocess, then end the main process above)

In this nginx file we currently only use two files

nginx-1.17.6\conf\nginx.conf file: to configure the nginx server

nginx-1.17.6\logs\error.log When our nginx starts to report an error, you can go here to view the error

First, let's look at the configuration file: the comments in the configuration file are all #

The project is deployed in the root directory

server { 
        listen 8887; #Listening port number 
        server_name localhost; #Access address 
        location / { #Access the root directory of this server 
            root html; #Access the path of the project 
            index index.html index.htm; #Access the file below the path 
            try_files $uri $uri/ /index.html break; 
        } 
 }

Double-click/command line to run nginx.exe file

Open the task manager and check whether this file exists to prove that the startup is successful

Then visit http://localhost:8887 according to the above configuration   and it will load the content in the html folder. We only need to copy the items in the dist directory after packaging and building to the following address to access

The project is deployed in the subdirectory/subapp

server { 
        listen 8887; #Listening port number 
        server_name localhost; #Access address 
        location /suming { #Access the project subdirectory under the /suming folder under the root directory of the server 
            #root "E:/1711A/newnear_pro/dist" ; #Root path of access 
            #root "E:/1907A/bwonline/dist"; #Root path of access 
             root html; 
            index index.html index.htm; #What is the home page under the root path called 
           try_files $uri $uri/ / summing/index.html; 
        } 
 }

1. In the configuration of nginx. The path of the root file pointed to by the following try_files should be added with the path of the subdirectory/suming

2 In the project's webpack configuration (vue.config.js), add the configuration packaged to the root directory

3. Add a base under the routing folder

const router = new VueRouter({ 
  mode: 'history', 
  base: '/suming', //Vue is caused by looking for components from the root directory of nginx. So you need to modify the starting point of the route search 
  // base: process.env. BASE_URL,

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? '/suming' : '/',
})

4: Create a new sub-application folder under the root directory of nginx or add a webpack configuration

upload server

Uploading our project to the server requires a handling tool: FileZilla  (the same tool also has FTP XShell ssh pwoershell, you just need to remember fileZilla)

 The company will also tell you where your project will be uploaded to:

In my server /www/wwwroot/www.lovetang.top/CRMEB-master/crmeb/public

Of course, you can also link to the server through the command line (not recommended)

sftp [email protected] When you enter the password, you cannot see the input, because a self-protection mechanism of linux is invisible

Problems encountered during project launch:

1. Our company is in the history mode. When the project is launched, a 404 error will be reported when the project is refreshed. At that time, I found a solution from the Internet and configured try_files for nginx. In fact, it is equivalent to when the page is refreshed , redirecting to the root page, parsing the routing table, rather than parsing it as a folder

Routing is divided into two modes: hash and history. Among them, 404 will be reported only when history is online.