The vue-cli project is packaged and deployed with Nginx

Modify configuration before build

build --> utils.js

// Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../', //加上段代码，防止打包后丢失图片路径
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

config --> index.js

build: {
    //...

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',  //修改后路径
    
    //...
   }

src-> main.js: If you use other introduced components such as Element-UI

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'  //router要最后import，否则element样式可能会错乱
Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Bale

Execute in the terminal in the root directory:

npm run build

The dist folder is generated under the project root directory. This is a packaged project. Pass it to the server you want to deploy. It can be placed anywhere. I will put it under C: \.

For more information about the configuration of the config-> index.js file in the vue-cli project, refer to this blog:

https://blog.csdn.net/hanghangaidoudou/article/details/80839713?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2

Nginx download

http://nginx.org/en/download.htmlOfficial download link

Unzip the compressed file on the server, and put it anywhere after decompressing.

Nginx configuration

conf-> nginx.conf The initial configuration is as follows:

http {
    #...
    
    server {
        listen       80;
        server_name  localhost;

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

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    
    #...
}

Generally speaking, only the content in the server needs to be changed:

http {
    #...
    
    server {
        
        #端口，可改动，但是此前要先查看想改动的端口是否被占用
        #想要被其他用户访问的话记得设置服务器的安全组
        listen       80;
        
        server_name  localhost;

        
        location / {
            
            #改动2-2：
            try_files $uri $uri/ @router;
            
            #改动1：这里改成打包好的dist文件夹的绝对路径
            root   C:\dist; 
            
            index  index.html index.htm;
        }
        
        #改动2-1：路由重写，防止history模式下刷新页面404
        #      但是这样改动之后在其他页面刷新/后退等操作都会回到index.html页面
        location @router {
            rewrite ^.*$ /index.html last;
        }
        
        #改动3：设置跨域
        location /api {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Nginx-Proxy true;
            proxy_set_header Connection "";
            
            #跨域访问的后端地址
            proxy_pass http://120.xx.xxx.xxx:81;
            
            #我们发送请求的url如果是形如'/api/getMsg?param=N'
            #重写后就会变为'http://120.xx.xxx.xxx:81/getMsg?param=N'
            rewrite  ^/api/(.*)$ /$1 break;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    
    #...
}

Personally think that rewriting is necessary to master, you can refer to the following link to learn:

https://www.jianshu.com/p/a8261a1a64f8

Start Nginx service

You can directly double-click nginx.exe in the uncompressed nginx folder to start the service, or you can use the command line terminal:

nginx.exe所在目录> start nginx

Other commands:

nginx.exe -s stop 不保存相关信息
nginx.exe -s quit 可保存相关信息
nginx.exe -s reload 修改配置后重启服务
netstat -aon|findstr "80" 查看端口有“80”字段的服务
taskkill /f /t /im nginx.exe 终止Nginx服务