vue?hash模式改成history,同時實現(xiàn)spa預(yù)渲染問題
更新時間：2025年03月31日 10:54:11 作者：奇怪的守護神
這篇文章主要介紹了vue?hash模式改成history,同時實現(xiàn)spa預(yù)渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1.前言
由于公司需要把首頁進行seo排名，但是首頁已經(jīng)完成好，并且還是hash模式，要做成seo排名，不能有hash模式的#，同時要能讀取到渲染好的頁面.所以，針對這2點困難，最終想到的解決方案是:
- 先hash需要轉(zhuǎn)換為history，保證是無#的美觀模式;
- 需要做到提前渲染好，可以采取vue的SSR，spa預(yù)渲染或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預(yù)渲染，即使用prerender-spa-plugin插件預(yù)渲染.由于頁面較少，且預(yù)渲染相對于SSH比較簡單，于是選擇預(yù)渲染頁面，預(yù)渲染可以極大的提高網(wǎng)頁訪問速度。而且配合一些meat插件，基本可以滿足SEO需求。改動在三者中最小
- Nuxt就是基于Vue的一個應(yīng)用框架，采用服務(wù)端渲染，讓你的SPA應(yīng)用(Vue)也可以擁有SEO.官方文檔，但是由于需要重新改變底層框架，改動在三者中最大.
綜上所述，選擇第二個方式，spa預(yù)渲染，改動小，同時也能達到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 修改原因：
- ./ 是指用戶所在的當(dāng)前目錄（相對路徑）；
- / 是指根目錄（絕對路徑，項目根目錄），也就是項目根目錄；
對于hash模式，根路徑是固定的，就是項目的根目錄，但是history模式下，以/開頭的嵌套路徑會被當(dāng)作根路徑，所以使用“./”引入文件，就會找不到文件了，因為文件本身就是在項目根目錄下的，并不在嵌套路徑這個目錄下。
總結(jié)，無論hash模式還是history模式，可以直接使用“/”從項目根目錄引入靜態(tài)文件。
3.服務(wù)端修改
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)到默認(rèn)的index.html進行處理。
4.SPA預(yù)渲染
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生成的文件的基礎(chǔ)上，只有下面這個才是我們要配置的
new PrerenderSPAPlugin({
// 生成文件的路徑，也可以與webpakc打包的一致。
// 下面這句話非常重要?。?！
// 這個目錄只能有一級，如果目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預(yù)渲染的時候只會卡著不動。
staticDir: path.join(__dirname, '../dist'),
// 對應(yīng)自己的路由文件，比如index有參數(shù)，就需要寫成 /index/param1。這里很重要，需要把自己想要生成靜態(tài)文件的路由全部寫進去。
routes: [
'/',
'/about',
],
// 這個很重要，如果沒有配置這段，也不會進行預(yù)編譯
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應(yīng)上。
renderAfterDocumentEvent: 'render-event',
//時間
renderAfterTime:5000
})
})- 2.2目錄:src/main.js （mounted是新增代碼，對應(yīng)build/webpack.prod.conf.js里加的）
/* 記得要通過 router 配置參數(shù)注入路由，從而讓整個應(yīng)用都有路由功能*/
const app =new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
/* 這句非常重要，否則預(yù)渲染將不會啟動 */
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')最終npm run build ，生成代碼，目錄如下即成功
dist │ ├── about │ └── index.html │ ├── index.html └── static
5.全程操作概覽
- 修改完以上全部配置；
- 項目里npm run build生成文件，放入對應(yīng)服務(wù)器目錄；
- nginx重啟配置：
nginx -t #測試配置是否正確 nginx -s reload #重啟nginx配置
大功告成！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue項目配置跨域訪問和代理proxy設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
下面小編就為大家分享一篇Vue-路由導(dǎo)航菜單欄的高亮設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了解決el-date-picker日期選擇控件少一天的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了在vue項目中利用popstate處理頁面返回的操作介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)
日常業(yè)務(wù)開發(fā)中，form表單校驗是一個很常見的問題，本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要給大家介紹了在Vue.Js中的$watch()方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
vue element el-form 多級嵌套驗證的實現(xiàn)示例
本文主要介紹了vue element el-form 多級嵌套驗證的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
一般我們的前端Vue項目中都會涉及到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于vue項目部署跨域問題的詳細(xì)解決過程,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
在Vue3架構(gòu)里,v-slot 作為作用域插槽的關(guān)鍵支撐,重塑了父子組件間數(shù)據(jù)與方法傳遞的范式,本文主要來和大家剖析一下v-slot的相關(guān)特性,需要的可以了解下2025-01-01
這篇文章主要介紹了vue使用swiper的時候第二輪事件不會觸發(fā)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09