1. Vue項目打包部署到服務器
1.1. 配置
（1）修改package.json文件同級目錄下的vue.config.js文件。
// vue.config.js
module.exports = {publicPath: './',
}
（2）檢查router下的index.js文件下配置的mode模式。
??檢查如果模式改為了history模式，打包后的頁面為空，將其注釋，使用默認的hash模式即可
（3）在README.md文件下點擊npm run build 打包，或者在命令行輸入。
（4）目錄中多一個dist文件夾即為打包成功。
1.2. 測試
??測試一下，瀏覽器打開網址鏈接即可。
2. history模式部署
??默認情況下，Vue項目使用的是hash路由模式，就是URL中會包含一個#號的這種形式。#號以及之后的內容是路由地址的hash部分。正常情況下，當瀏覽器地址欄地址改變，瀏覽器會重新加載頁面，而如果是hash部分修改的話，則不會，這就是前端路由的原理，允許根據不同的路由頁面局部更新而不刷新整個頁面。H5新增了history的pushState接口，也允許前端操作改變路由地址但是不觸發頁面刷新，history模式即利用這一接口來實現。因此使用history模式可以去掉路由中的#號。
2.1. 項目配置
??在vue-router路由選項中配置mode選項和base選項，mode配置為’history’；如果部署到非域名根目錄，還需要配置base選項為前文配置的publicPath值（注意：此情況下，publicPath必須使用絕對路徑/test的配置形式，而不能用相對路徑./）
2.2. nginx配置
??對于history模式，假設項目部署到域名下的/test目錄，訪問http://xxx/test/about的時候，服務器會去找/test指向的目錄下的about子目錄或文件，很顯然因為是單頁面應用，并不會存在a這個目錄或者文件，就會導致404錯誤：
??Vue項目部署后頁面找不到
??我們要配置nginx讓這種情況下，服務器能夠返回單頁應用的index.html，然后剩下的路由解析的事情就交給前端來完成即可。
??history模式nginx配置
??這句配置的意思就是，拿到一個地址，先根據地址嘗試找對應文件，找不到再試探地址對應的文件夾，再找不到就返回/test/index.html。再次打開剛才的about地址，刷新頁面也不會404啦：
3.3. history模式部署到非域名根路徑下
??非域名根目錄下部署，首先肯定要配置publicPath。需要注意的點前面其實已經提過了，就是這種情況下不能使用相對路徑./或者空串配置publicPath。為什么呢？原因是它會導致router-link等的表現錯亂，使用測試項目[2]分別使用兩種配置打包發布，審查元素就能看出區別。在頁面上有兩個router-link，Home和About：
3.4. 兩種配置打包后的結果如下。
（1）publicPath配置為./或者空串：
（2）publicPath配置為/test：
??publicPath配置為相對路徑的router-link打包后地址變成了相對根域名下地址，很明顯是錯誤的，所以非域名根路徑部署應該將publicPath配置為完整的前綴路徑。
3. Vue項目打包部署問題總結
3.1. 項目配置
??為了解決打包后資源路徑不對的問題，需要在vue.config.js中配置publicPath，這里有兩種配置方式，分別將publicPath配置為./和/test：
const {defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,// 部署生產環境和開發環境下的URL。// 默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上// 例如 https://www.ruoyi.vip/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.ruoyi.vip/admin/，則設置 baseUrl 為 /admin/。publicPath: process.env.NODE_ENV === "production" ? "./" : "/",// publicPath: "./",// 在npm run build 或 yarn build 時 ，生成文件的目錄名稱（要和baseUrl的生產環境路徑一致）（默認dist）//outputDir: "dist",// 用于放置生成的靜態資源 (js、css、img、fonts) 的；（項目打包之后，靜態資源會放在這個文件夾下）//assetsDir: "static",// 是否開啟eslint保存檢測，有效值：ture | false | 'error'//lintOnSave: process.env.NODE_ENV === "development",lintOnSave: false,
})
)
)
)
