Vue cli-2.0/3.0 打包放到服務器用nginx部署操作

vue 配置：

首先說一下路由模式2種  history與hash是不一樣的。

cli 2.0 版本：

直接在config>index.js   build :  assetsPublicPath 修改如下圖：

cli 3.0 版本 ：

需要手動在目錄層 新建vue.config.js 文件  以及寫上配置信息見右圖

 

注：cli 2個版本 assetsPublicPath 與 publicPath 爲空或者寫 ./ 都可以。

接下來說一下nginx的配置

以nginx 1.18 版本爲例子

#如果路由模式爲history  必須加 try_files
location /system { #訪問地址
        alias /data/system/dist/;#文件路徑
        try_files $uri $uri/ /system /index.html; #路由轉換
        index index.html;  #默認頁面
        }

#如果路由模式爲hash 直接如下配置
location /system { #訪問地址
        alias /data/system/dist/;#文件路徑 
        index index.html;  #默認頁面
        }

 

 最終訪問形式：http://127.0.0.1/system