- Vue.js從入門到項目實踐（超值版）
- 聚慕課教育研發中心編著
- 730字
- 2022-07-29 14:27:29
1.5 Vue.js的兼容性
在開發項目的過程中，前端人員可能會經常遇到不同瀏覽器之間的不兼容問題或者項目之間的不兼容問題，這類問題往往需要使用插件來進行解決。
下面介紹Vue.js項目的兼容性及項目部署情況。
1．處理兼容性問題的相關插件
（1）解決部分低版本安卓瀏覽器不支持Promise（ES 6新特性）的問題（還出現白屏情況的打包編譯即可解決）。安裝babel-polyfill依賴包（執行npm install babel-polyfill--save命令），在Vue項目的main.js中編寫import 'babel-polyfill'引用即可。
執行命令如下：
/*
*npm install babel-polyfill--save，解決部分低版本瀏覽器不兼容Promise的問題，或者會導致白屏問題
**/
import 'babel-polyfill'
（2）解決移動端某些版本瀏覽器單擊事件延時觸發的問題。安裝fastclick依賴包（執行npm install fastclick--save-dev命令），在Vue項目的main.js中將fastclick綁定到body即可。
執行命令如下：
/*
*npm install fastclick --save-dev，安裝fastclick依賴包，避免移動端某些瀏覽器click事件有延時觸發的情況
**/
import fastClick from 'fastclick'
fastClick.attach(document.body)
2．項目的部屬與配置
（1）路徑別名配置（build/webpack.base.conf.js文件）。代碼如下：
resolve:{
extensionsL['.js','.vue','.json']
alias:{
'vue$' : 'vue/dist/vue.esmjs',
/*可以任意配置目錄別名*/
'@':resolve(dir:'src'),
'styles':resolve(dir:'XXX'),
'common':resolve(dir:'XXX')
}
}
（2）webpack提供的代理配置。代碼如下：
（3）ESLint代碼規范檢測（build/webpack.base.conf.js文件，不會對注釋代碼進行檢測）。代碼如下：
/* 代碼規范檢測 */
const createLintingRule =() =>({
test : /\.(js|vue)$/,
loader : 'eslint-loader',
enforce : [resolve(dir : 'src'),resolve(dir : 'test')],
options : {
formatter : require('eslint-friendly-formatter'),
emitWarning : !config.dev.showEslintErrorsInOverlay
}
})
提示：在WebStrom中可以安裝ESLint插件進行快捷代碼格式化。
3．Vue兼容問題
（1）使用KingEditor，在IE瀏覽器下提示“對象不支持moveToElementText屬性或方法”。
原來的代碼如下：
if(_IE){
var rng = cmd.range.get(true);
rng.moveToElementText(div[0]);
rng.select();
rng.execCommand('paste');
e.preventDefault();
}
修改的代碼如下：
if(_IE){
var rng = cmd.range.get(true);
try {
rng.moveToElementText(div[0]);
rng.select();
rng.execCommand('paste');
e.preventDefault();
}
catch(e){ }
}
提示：在壓縮KingEditor.js后替換KingEditor-min.js即可。
（2）Vue.js組件的長字符串拼接問題。在IE中不兼容長字符串拼接，因此需要使用字符串拼接。
（3）axios.js的post請求問題。
在Chrome瀏覽器下，代碼如下：
var newParams = new URLSearchParams();
newParams.append('type',vm.typeNum);
newParams.append('num','20');
newParams.append('curpage',vm.cur);
axios.post(url,newParams)
.then(function(res){
})
.catch(function(){…});
在IE瀏覽器下，代碼如下：
（4）在IE瀏覽器下提示Promise未定義的問題。如果遇到Promise未定義的問題需要引入polyfill.js文件，即下載polyfill.js文件，并引入項目中。