vue部署到nginx的location配置（能夠在不一樣路徑刷新404）

我項目中設置vue路由爲history模式，項目就會少了地址欄的#號，比較美觀，同時也會存在一系列問題。部署到nginx後會存在刷新404的問題。因此想用好該模式須要後端配合。官網有說明的

 

nginx的配置

修改nginx的location配置，使用try_files直接指定到index.html文件

location / {
            # root 根目錄，默認nginx下的html文件夾，能夠指定其餘
            root   ./html;
            index  index.html;
            # vue的路由並非真實物理路由，因此用try_files，路徑都指向根目錄下的index.html
            try_files $uri $uri/ /index.html;
        }
root：隨便指定一個目錄，目錄下存放vue構建後的文件

index：指定的首頁文件

try_files：由於vue的路由都是從index.html做爲入口，因此用try_files就對了

js、css等引入失敗

js、css等文件路徑加載有誤，跟地址欄的路由拼接起來做爲js、css的目錄了。找了不少資料，後來發現，是由於個人配置中使用了相對路徑

 

查找好久，剛開始覺得是nginx的鍋，後來才發現，原來是我改爲相對路徑致使的

assetsPublicPath: './',
項目中config文件夾下index.js中，默認是"/"，由於本地打開build時頁面空白，因此修改爲相對路徑"./"，結果影響到部署服務器了。由於個人路由模式是history，並且存在多個子路由。因此應該改爲絕對路徑。才能正常引入vue編譯後的js、css文件

改爲

assetsPublicPath: '/',
一切正常