The vue project is packaged and deployed to the nginx server

If the effect to be achieved is as follows

　　http://ip/vue => is the path to access the home page is usr/local/nginx/html/vue

　　http://ip/website => is the path to access the home page is usr/local/nginx/html/avue

2. Before packaging, add the following to the corresponding unpackaged file　

　　

The files in the vue directory are not added to the routing index.js file before packaging
    
    export default new Router({
      mode: ' history ' ,
       base : " /vue " //There is no "/" after this, and the 'root' is related to the different methods of nginx configuration
      routes: [
The files in the avue directory are not added to the routing index.js file before packaging

     export default new Router({
      mode: 'history',

　　　　 base: '/website/' //Add "/" after this, which is related to the different method configuration of nginx. Use "alias"

      routes: [

The files in the html directory are not added to the routing index.js file before packaging

      export default new Router({
      mode: 'history',
      routes: [

 

2. If the vue packaged file is placed under usr/local/nginx/html, the structure is as follows

html
    -vue
        -static
        -index.html
    -avue
         -static
         -index.html
　　　-static
　　　-index.html

3. The corresponding configuration of nginx

location /{
        root   html;
        try_files $uri $uri/ / index.html; #Here to solve the problem that the page cannot be found after the route is refreshed
        index  index.html index.htm;
        }

location / view{
        root   html;
        try_files $uri $uri / /vue/ index.html; #Here to solve the problem that the page cannot be found after the route is refreshed
        index  index.html index.htm;
        }
location /website {
        alias /usr/local/nginx/html/avue;
        try_files $uri $uri / /website/ index.html;　 #Here is to solve the problem that the page cannot be found after the route is refreshed 
　　　　　index index.html index.htm; autoindex on; }

4. When entering the first page, the corresponding js and css loading files cannot be found.　

The easiest way here is to directly modify the index.html in the packaged fileas in the loaded file in 
  vue / index.html
    
<script type=text/javascript src=/static/js/app.39a70a1be7abbcb8f4c5.js></script>
 changed to
<script type=text/javascript src= /vue/ static /js/app.39a70a1be7abbcb8f4c5.js></script> 

For example: avue/index.html Also make corresponding modifications and add "/avue" in front of the path. 

Of course, if the access is There is no path in front of http://ip/, of course, there is no need to modify it

　This gives you access to three different vue projects

http://ip

http://ip/vue

http://ip/website