nginx deploys the vue project and prefixes the access path

Nginx installation and startup

Go to the official website to download the nginx compressed package, unzip it to a suitable location on the computer, I put it on the D drive, the directory is D:\nginx-1.21.6,

in this path, directly enter cmd, open the command line, and start the command:

nginx.exe

or

start nginx

close command

 taskkill /f /t /im nginx.exe

Modify the configuration file, do not need to close and then start, restart directly, restart command

nginx -s reload 

Vue increases access path

Sometimes, according to the needs, different vue projects are distinguished, so a prefix is ​​added, no prefix is ​​added, access is, http://localhost:8080/a prefix is ​​added, cancer, the access path is http://localhost:8080/cancer
this path, modify the configuration in router/index.js, and add a base

const router = new VueRouter({
  routes: routes.concat(asyncRouterMap),
  base: window.publicPath ? window.publicPath + "/" : "",
  mode:
    process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test"
      ? "history"
      : "hash",
});

window.publicPath is the required prefix, window.publicPath = "/cancer";

Then npm run build is packaged, put the packaged files in the html folder under the nignx path, create a new folder, cancer, and put the contents of the package into it

nginx configuration

	server {
         #前端启动端口监听
        listen       8780;
        #本机ip，也可以是域名
        server_name  192.168.2.87;
		location / {  
            root   html;
            index  index.html index.htm;
        }
		location /cancer {
			alias  html/cancer;
           index  index.html index.htm;
           try_files  $uri  $uri/   /cancer/index.html;
        }
		

Reference resource
nginx deploys vue project path Add prefix
nginx proxies multiple Vue projects according to the prefix