Vue筆記：Vue制作個人簡歷並使用Nginx部署

 

一、實現效果

項目使用Vue3+ElementUI+BootStarp

Github地址：https://github.com/Angell1/CV

測試頁面：http://123.207.251.121:8888/

環境：

 

 

部署

1、Vue打包

npm run build

注意：我使用vue3，所以自定義配置文件：

module.exports = {
    publicPath: './',
    outputDir: 'dist',
    devServer: {
    host: '0.0.0.0',
    port: 8080,
    open:true
    }
}

通過上面命令后打包好的靜態資源將輸出到dist目錄中。如圖所示

 

 2、Nginx配置如下：

    server {
            listen       8888;#監聽8888端口
            server_name  localhost;

                #charset koi8-r;

                #access_log  logs/host.access.log  main;
                root        html/dist;#vue項目的打包后的dist

            location / {
                try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
                index  index.html index.htm;
            }
                #對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的文件
            #因此需要rewrite到index.html中，然后交給路由在處理請求資源
            location @router {
                rewrite ^.*$ /index.html last;
                }
                #.......其他部分省略
      }