網(wǎng)站建設(shè)日程表表格seo的流程是怎么樣的
vue 如何優(yōu)化首頁的加載速度?
- 路由懶加載
- ui框架按需加載
- gzip壓縮
vue首頁白屏是什么問題引起的
- 第一種,打包后文件引用路徑不對,導(dǎo)致找不到文件報錯白屏
解決辦法:修改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因為index.html里邊的內(nèi)容都是通過script標簽引入的,而你的路徑不對,打開肯定是空白的。先看一下默認的路徑。
- 第二種,由于把路由模式mode設(shè)置影響
解決方法:路由里邊router/index.js路由配置里邊默認模式是hash,如果你改成了history模式的話,打開也會是一片空白。所以改為hash或者直接把模式配置刪除,讓它默認的就行 。如果非要使用history模式的話,需要你在服務(wù)端加一個覆蓋所有的情況的候選資源:如果URL匹配不到任何靜態(tài)資源,則應(yīng)該返回一個index.html,這個頁面就是你app依賴頁面。
所以只要刪除mode或者把mode改成hash就OK了。
- 第三種,項目中使用了es6的語法,一些瀏覽器不支持es6,造成編譯錯誤不能解析而造成白屏
解決方法:
安裝 npm install --save-dev babel-preset-es2015
安裝 npm install --save-dev babel-preset-stage-3
在項目根目錄創(chuàng)建一個.babelrc文件 里面內(nèi)容 最基本配置是:
{// 此項指明,轉(zhuǎn)碼的規(guī)則"presets": [// env項是借助插件babel-preset-env,下面這個配置說的是babel對es6,es7,es8進行轉(zhuǎn)碼,并且設(shè)置amd,commonjs這樣的模塊化文件,不進行轉(zhuǎn)碼["env", {"modules": false}],// 下面這個是不同階段出現(xiàn)的es語法,包含不同的轉(zhuǎn)碼插件"stage-2"],// 下面這個選項是引用插件來處理代碼的轉(zhuǎn)換,transform-runtime用來處理全局函數(shù)和優(yōu)化babel編譯"plugins": ["transform-runtime"],// 下面指的是在生成的文件中,不產(chǎn)生注釋"comments": false,// 下面這段是在特定的環(huán)境中所執(zhí)行的轉(zhuǎn)碼規(guī)則,當(dāng)環(huán)境變量是下面的test就會覆蓋上面的設(shè)置"env": {// test 是提前設(shè)置的環(huán)境變量,如果沒有設(shè)置BABEL_ENV則使用NODE_ENV,如果都沒有設(shè)置默認就是development"test": {"presets": ["env", "stage-2"],// instanbul是一個用來測試轉(zhuǎn)碼后代碼的工具"plugins": ["istanbul"]}}
}