nginx deploys local startup vue project

Requirement: I just want to directly access the packaged vue project without running the vue project locally

1. Install nginx

nginx: download , here I installed the 1.12.2 stable version

2. Get a compressed package directly after downloading, and unzip it directly to a directory

! ! ! ! Notice! ! ! The decompression path must not contain Chinese, if there is Chinese, an error will be reported! ! !

Then double-click nginx to start , or run start nginx in the cmd decompression directory of nginx , and found that a window flashed on the screen

3. Check whether nginx starts successfully

Check whether there is nginx in the background process in the task manager. If it is not found, it will fail to start

4. Solved after nginx failed to start

Open the logs file in the decompression directory of nginx, see the error log, open it directly, and copy the error message Baidu

 5. Port occupancy error reporting

There are many solutions on the Internet. I choose the simplest one here, directly change the default port 80 of nginx, and change it to a port that will never be occupied. As shown in the figure, from conf==》nginx.conf, double-click to select the diary this open

Find the listen under the server, write 80, directly change 80 to 8888 and restart nginx 

In the decompression directory of nginx, restart nginx after cmd :

nginx -s reload

6. Configure the front-end packaging project name in the vue.config.js file of the vue project

process.env.VUE_APP_PUBLIC_PATH This is an environment variable defined by yourself. You can define a name yourself. You can call it whatever you want. If you don’t know where to configure this environment variable, you can write it yourself, such as

let publicPath ="/student/"

base:"/student/"

The same name is enough. Note that to configure multiple projects, it needs to be consistent with the alias of localhost. If you don’t understand, please scroll down

// 基础路径 注意发布之前要先修改这里
let publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
module.exports = {
  // 根据你的实际情况更改这里
  publicPath
}

Also change in the router

// 导出路由 在 main.js 里使用
const router = new VueRouter({
  mode: 'history',
  base: process.env.VUE_APP_PUBLIC_PATH,
  routes
})

7. Package the vue project

After running the following command

npm run build

Throw the packaged dist file directly into the html of nginx

7. Run the project

The port number 80 is changed according to the setting in the conf file

http://localhost:80

8. Close the nginx service

nginx -s stop

9. Deploy multiple projects (vue, webpack, etc.)

The above article is for deploying a single project. You can configure vue.config.js and router with or without configuration, which is the default

Requirements: One port configures n items

Configure n items according to the way of splicing aliases behind the ports

Configure in conf== ​​"nginx.conf

1. Note that the default project of the first port can be configured without any configuration and packaged directly
2. Create a new folder in the html file to store the project , you can call it anything, here I just created three new folders to store the project

       3. Throw the packaged file directory into the newly created folder, the directory is almost like this

 4. Configure in conf==》nginx.conf, first find server{},

Notice! ! The name of this /company should be consistent with the name you configured on webpack or vue, otherwise it will always show me that you can’t find it

 server {
#端口号
        listen       8888;
#域名，没有买域名就用本地的不需要改
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
#默认项目
        location / {
#这个是目录，从html开始找项目目录
            root   html/web;
            index  index.html index.htm;
        }
#/company 是需要进行配置，如果是端口默认的就不需要配置
        location /company {
      #注意后面需要加/
	  alias html/renren/dist/;
            index  index.html index.htm;
        }
}

        5. Configure the second project. If it is webpack, it is recommended to read this article, too lazy to write

        configure webpack

        6. Please scroll up to configure the vue project, I have already written on the title 6

10. Different ports configure different items

This is simple, just copy directly, change the port and the root address where you store the packaged project yourself

! ! Notice! The packaged project must be placed in the html file, and others will not work

 server {
        listen       8870;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root  html/company/dist;
            index  index.html index.htm;
        }

}

11. Finally

! ! ! If you modify the nginx.conf file, you must save it and restart nginx

Send a few nginx commands, the nginx command should be in the nginx installation directory, cmd opens the control panel and then uses the command

查看版本
nginx -v
开启nginx服务
start nginx
重启服务
nginx -s reload
关闭服务
nginx -s stop

It’s almost the end of the article, I hope it can help you~