vue?hash模式改成history,同時實現(xiàn)spa預渲染問題
更新時間：2025年03月31日 10:54:11 作者：奇怪的守護神
這篇文章主要介紹了vue?hash模式改成history,同時實現(xiàn)spa預渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1.前言
由于公司需要把首頁進行seo排名，但是首頁已經(jīng)完成好，并且還是hash模式，要做成seo排名，不能有hash模式的#，同時要能讀取到渲染好的頁面.所以，針對這2點困難，最終想到的解決方案是:
- 先hash需要轉(zhuǎn)換為history，保證是無#的美觀模式;
- 需要做到提前渲染好，可以采取vue的SSR，spa預渲染或nuxt.js.
2.選取渲染方式
首先，hash轉(zhuǎn)換為history已經(jīng)是板上釘釘?shù)氖虑?，這時候就開始找快捷簡單改動少的渲染方式，分別有vue的SSR，spa和nuxt.js.
- vue項目提供了ssr的方案.不過ssr方案需要在node上調(diào)用
renderToString來渲染。如果不介意在系統(tǒng)結(jié)構(gòu)中增加一層node的話，就可以使用ssr的方式，這種方式會改變前后端交互的方式。ssr文檔.改動中等 - spa預渲染，即使用prerender-spa-plugin插件預渲染.由于頁面較少，且預渲染相對于SSH比較簡單，于是選擇預渲染頁面，預渲染可以極大的提高網(wǎng)頁訪問速度。而且配合一些meat插件，基本可以滿足SEO需求。改動在三者中最小
- Nuxt就是基于Vue的一個應用框架，采用服務端渲染，讓你的SPA應用(Vue)也可以擁有SEO.官方文檔，但是由于需要重新改變底層框架，改動在三者中最大.
綜上所述，選擇第二個方式，spa預渲染，改動小，同時也能達到seo的要求
3.hash轉(zhuǎn)為history
1.模式修改 (目錄:src/router/index.js)
// mode:'hash',
mode: 'history',
base: '/',2.相對路徑調(diào)整
- 2.1 目錄:build/webpack.prod.conf.js
//history為"/",hash:'./' //publicPath:'./', publicPath:'/',
- 2.2目錄:config/index.js
// histroy模式:"/" ,hash模式:"./" //assetsPublicPath: './', assetsPublicPath: '/',
2.3 修改原因：
- ./ 是指用戶所在的當前目錄（相對路徑）；
- / 是指根目錄（絕對路徑，項目根目錄），也就是項目根目錄；
對于hash模式，根路徑是固定的，就是項目的根目錄，但是history模式下，以/開頭的嵌套路徑會被當作根路徑，所以使用“./”引入文件，就會找不到文件了，因為文件本身就是在項目根目錄下的，并不在嵌套路徑這個目錄下。
總結(jié)，無論hash模式還是history模式，可以直接使用“/”從項目根目錄引入靜態(tài)文件。
3.服務端修改
nginx配置：參考官網(wǎng)教程
location / {
proxy_pass http://127.0.0.1:80;
root /usr/local/tomcat/tomcat_xhcf/webapps/ROOT; #表明路徑
index index.html index.htm;
try_files $uri $uri/ /index.html; #交給index.html處理
}原因：這樣修改，避免了刷新404的問題，因為如果URL匹配不到任何靜態(tài)資源，就跳轉(zhuǎn)到默認的index.html進行處理。
4.SPA預渲染
1.安裝prerender-spa-plugin
npm i -s prerender-spa-plugin
或者 (淘寶鏡像)
cnpm i --save prerender-spa-plugin
2.配置
- 2.1目錄：build/webpack.prod.conf.js
- 在plugins列表里，加入下面代碼：
// 在vue-cli生成的文件的基礎上，只有下面這個才是我們要配置的
new PrerenderSPAPlugin({
// 生成文件的路徑，也可以與webpakc打包的一致。
// 下面這句話非常重要?。。?
// 這個目錄只能有一級，如果目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡著不動。
staticDir: path.join(__dirname, '../dist'),
// 對應自己的路由文件，比如index有參數(shù)，就需要寫成 /index/param1。這里很重要，需要把自己想要生成靜態(tài)文件的路由全部寫進去。
routes: [
'/',
'/about',
],
// 這個很重要，如果沒有配置這段，也不會進行預編譯
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
renderAfterDocumentEvent: 'render-event',
//時間
renderAfterTime:5000
})
})- 2.2目錄:src/main.js （mounted是新增代碼，對應build/webpack.prod.conf.js里加的）
/* 記得要通過 router 配置參數(shù)注入路由，從而讓整個應用都有路由功能*/
const app =new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
/* 這句非常重要，否則預渲染將不會啟動 */
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')最終npm run build ，生成代碼，目錄如下即成功
dist │ ├── about │ └── index.html │ ├── index.html └── static
5.全程操作概覽
- 修改完以上全部配置；
- 項目里npm run build生成文件，放入對應服務器目錄；
- nginx重啟配置：
nginx -t #測試配置是否正確 nginx -s reload #重啟nginx配置
大功告成！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
如何利用Turn.js?+?Vue3實現(xiàn)前端翻書效果
手機翻書效果是一種模擬真實書籍翻頁的動畫效果,常見于電子閱讀器、在線書店或數(shù)字圖書館等應用中,這篇文章主要介紹了如何利用Turn.js?+?Vue3實現(xiàn)前端翻書效果的相關資料,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了vue使用插槽分發(fā)內(nèi)容slot的用法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了Vue中使用Scss實現(xiàn)配置、切換主題方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3如何使用watch監(jiān)聽props中的數(shù)據(jù)
在vue項目中,父子組件數(shù)據(jù)傳遞是最常見的場景,但是今天在開發(fā)過程中父級數(shù)據(jù)傳遞到子組件,控制子組件的顯隱,下面這篇文章主要給大家介紹了關于vue3如何使用watch監(jiān)聽props中數(shù)據(jù)的相關資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue如何將對象中所有的key賦為空值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli項目中img如何使用require動態(tài)獲取圖片
這篇文章主要介紹了vue-cli項目中img如何使用require動態(tài)獲取圖片，具有很好的參考價值，希望對大家有所幫助。2022-09-09
這篇文章主要介紹了vue3.x中apollo的使用,通過前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒有vue的，本文給大家介紹了前端獲取到apollo數(shù)據(jù)的過程，需要的朋友可以參考下2023-02-02
為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題
這篇文章主要介紹了為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue 實現(xiàn)超長文本截取,懸浮框提示，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在Vue項目中,我們可能會遇到這樣的需求：需要在應用中嵌入iframe頁面,并且要求在路由切換的過程中,iframe的內(nèi)容不會被刷新,本文將介紹如何解決這個問題,并給出具體的實現(xiàn)方案,需要的朋友可以參考下2025-01-01