『壹』 Vue多頁面應用配置
最近由於工作驅動，項目包含pc端及mobile端，pc端和mobile端核心功能一致，最大的不同是UI,為了減少維護的成本，決定使用Vue的多頁面開發。
項目線上部署在一個子目錄下，為了解決在本地和線上路徑保持一致，需要修改一些配置。所以以此篇文章來記錄一下配置過程中的問題。
這里是我放在github上的項目，裡面有整個配置文件。感興趣的朋友可以參考一下： vue-multiple-page
此篇文章記錄了先在根路徑下的多頁面配置，再從根路徑修改成子路徑的配置
vue腳手架vue-cli3及以上；
在本地用vue-cli新建一個項目；
vue3.js :路由配置修改的是 history: createWebHistory('/mobile/')
vue3.js :路由配置修改的是 history: createWebHistory('/e/')
mobile端mobile.js的base修改成 base: '/e/mobile'
vue3.js :路由配置修改的是 history: createWebHistory('/e/mobile')
特別注意的地方
『貳』 vue打包後生成可配置文件，用於修改介面路徑等
vue打包發布後，如果介面地址等發生變更，需要重新打包，過於繁瑣。因此需要將一些例如介面地址、網站參數等拿出來動態配置。
具體步驟如下：
1、安裝generate-asset-webpack-plugin插件
npm install generate-asset-webpack-plugin --save-dev
2、在vue.config.js中配置如下：
3、使用
在main.js中全局引入
4、打包後dist下生成.json文件，修改介面後生效
如果你有更好的方法也請留言哦。。。
『叄』 vue編譯打包速度優化
1、首先在config文件夾下配置webpack.dll.config.js(內容如下)，要打包的模塊的數組可以將一些較大的依賴放進vendor中
2、在package.json的scripts加上
3、運行npm run dll就可以生成vendor-manifest.json和vendor.dll.js
4、然後在index.html中引入vendor.dll.js
然後就可以正常的進行編譯打包，會發現將更多的依賴放到vendor，打包速度越快
優化前
優化後
大概平均可以節省三分之一的時間。參考 webpack中文網
『肆』 vue配置不同環境打包項目（dev、test、prod）
2.修改package.json文件，自定義打包命令
3.修改config文件，添加對應環境的xxx.env.js文件
test.env.js文件
prod.env.js
dev.env.js
4.修改打包配置
打開build/webpack.prod.conf.js文件
修改
build/build.js
寫入api文件
api/index.js文件
執行npm run build--test 、npm run build--prod 打包不同環境
『伍』 vue項目history打包後部署在二級目錄相關配置
history模式，因為我們的應用是個單頁客戶端應用，如果後台沒有正確的配置，當用戶在瀏覽器直接通過路由訪問 就會返回 404。所以呢，要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面。
1.vue-router 路由的文件的配置，根據自己部署的二級目錄填寫
2.在vue.config.js配置文件（如果沒有新建一個，項目根目錄下）
3.在入口文件中index.html 的head 標簽內加入
4.最後就是服務端部署配置，以nginx 為例
配置完這些之後，可以通過二級目錄訪問到頁面了，但是圖片資料會載入不了。
1.通過img標簽寫的圖片路徑，如果是寫的絕對路徑例如/static/images, 圖片就會訪問不到，要改為static/images相對路徑，（曾經犯過這樣的錯誤記錄一下）；
2.通過css background寫的圖片路徑，如果是寫的絕對路徑例如/static/images, 圖片就會訪問不到，因為css在打包時會通過loader處理並且通過插件ExtractTextPlugin從JS中抽取出來，所以需要改配置；
這樣配置後打包發現還不行，還需要把css的絕對路徑寫法改為相對路徑，比如background: url('/static/images/login/loginBg.png') no-repeat;改為background: url('../../../static/images/login/loginBg.png') no-repeat;
『陸』 通俗易懂講解vue.config.js的配置參數
貼上 官網
vue-cli3 創建的時候並不會自動創建vue.config.js，因為這個是個可選項，所以一般都是需要修改webpack的時候才會自己創建一個vue.config.js
再然後因為vue-cli3內部高度集成了webpack，一般來說使用者不需要再去知道weboack做了什麼，所以沒有暴露webpack的配置文件，我們可以手動去創建vue.config.js 去修改默認的webpack。注意，只能叫vue.config.js。
publicPath （從 Vue CLI 3.3 起已棄用baseUrl，請使用publicPath）
參考： https://my.oschina.net/u/4446873/blog/4882847
默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.xxx.com/ 。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.xxx.com/my-app/ ，則設置 publicPath 為 /my-app/。
這個值在開發環境下同樣生效。如果你想把 開發伺服器架設在根路徑 ，你可以使用一個條件式的值：
通常開發環境，本地運行都會直接部署在根路徑上，publicPath設置為'/'，訪問地址是你的IP地址。如下是設置成'/app'的效果：
從上面可以得知，靜態資源文件都是在app下的，所以在dist下新增添一個app目錄，把dist下文件放到app下，相當於一個文件的路徑，可以發現項目會正常啟動。一般nginx都會配置一個靜態資源目錄，打包後的文件都會放到這個靜態資源目錄裡面，nginx去做映射，所以publicPath這個屬性基本不用改。'/'就行。
結論： publicPath配置成'/aaa/bbb/ccc'， 則需在相應的伺服器路徑中新建aaa>bbb>ccc的文件夾，然後將打包後的文件放進去，就ok啦。
項目中，我會在.env.proction文件中設置一個變數VUE_APP_BASE_URL ，項目打包後告訴相關人員 nginx 路由前綴是什麼即可
outputDir
assetsDir
indexPath
filenameHashing
直觀效果：當運行npm run build時，
打包後的文件後面都會帶一個8位的hash值，那啥是個hash值？
在打包出來的文件名上加上文件內容的hash是目前最常見的有效使用瀏覽器長緩存的方法，js文件如果有內容更新，hash就會更新，瀏覽器請求路徑變化所以更新緩存，如果js內容不變，hash不變，直接用緩存。（這段話是從別的文章裡面參考的）。
將filenameHashing這個值設置為false試試，就不會帶那個後綴hash值。
pages
lintOnSave
runtimeCompiler
transpileDependencies
proctionSourceMap
crossorigin （不理解）
integrity
configureWebpack
chainWebpack
Css相關配置
devServer
如果你的前端應用和後端 API 伺服器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 伺服器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。
補充知識
所謂的跨域就是不同源，不滿足協議、域名、埠都相同的約定
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 協議不同(https)
http://www.test.com:90/index.html 不同源 埠不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)
當協議、域名、埠中任意一個不相同時，就是不同源。若不同源之間相互請求資源，就算作跨域
補充知識
反向代理（Reverse Proxy）方式是指以代理伺服器來接受網路上的連接請求，然後將請求轉發給內部網路上的伺服器，並將伺服器上得到的結果返回給請求連接的客戶端，此時代理伺服器對外就表現為一個反向代理伺服器。客戶端無需做任何配置。
修改config/index.js /vue.config.js文件（改完之後千萬記得要重新 npm run dev）
host 將他的值修改為 0.0.0.0，代表可以訪問本機所有的IP地址，讓vue項目可通過localhost和IP同時訪問。
port 設置埠號
open 是否在第一次編譯時是自動打開瀏覽器
hot 開啟為true，啟動熱重載，自動刷新頁面
https
inline
overlay
targe 代理的伺服器，也就是api要訪問的伺服器。
changeOrigin 允許跨域， 為false時，請求頭中host仍然是瀏覽器發送過來的host;如果設置成true：發送請求頭中host會設置成target的值
ws 是否代理websocket
pathRewrite 重寫 url 的 path 部分
此文記錄下來，方便自己遺忘的時候能夠快速查閱，如有錯誤請指出。
參考鏈接：
https://www.jianshu.com/p/b358a91bdf2d
https://www.jb51.net/article/174200.htm
https://blog.csdn.net/liu_yunzhao/article/details/90520028
這篇文章講的也很詳細 https://blog.csdn.net/guozhangqiang/article/details/87197870