脚本宝典收集整理的这篇文章主要介绍了Vue-cli3项目处理包括(i18n/font-spider/xss/wangeditor),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue-cli2>>>>vue-cli3
处理pug语法;vue.config.js补充chainWebpack
chainWebpack: config => {
config.plugins.delete('prefetch');
config.module
.rule('pug')
.test(/.pug$/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
.end();
},
todoList:已解决
苹方字体抽离
vue首屏渲染方案
wangEditor坑
xss处理
CSP,项目被植入miner旷工的外置链接
i18n国际化处理
vue-i18n,vue-cli3可使用插件,vue add i18n,项目目录如下
|-src
|-lang
|-en.json,zh.json
|-page
|-abc
|-lang.json
|-abc.vue
在#app中$i18n.locale判断语境,新增最外层类名isEN以便对子元素中英切换时的处理
router处理,逻辑是在每次跳转先将from来源的参数存储入keysArr,包括lang属性,排序固定为?lang=en&a=123&b=456
function nextWithLang() {
let queryKeysArr = Object.keys(to.query);
// 如果目标地址没有lang属性,我们需要从前一页取或者默认给一个zh
if (!to.query.lang) {
let nextPath;
// 之前有设置过语言就采用
if (from.query.lang) {
nextPath = `${to.path}?lang=${from.query.lang}`;
// 将所有属性拍平接在语言之后,如:/?lang=zh&id=123&name=qqq
if (queryKeysArr.length > 0) {
queryKeysArr.forEach(key => {
if (key != 'lang') {
nextPath += `&${key}=${to.query[key]}`;
}
});
}
}
// 没有设置过语言的话就给默认设置一个zh
else {
nextPath = `${to.path}?lang=zh`;
// 将所有属性拍平接在语言之后,如:/?lang=zh&id=123&name=qqq
if (queryKeysArr.length > 0) {
queryKeysArr.forEach(key => {
if (key != 'lang') {
nextPath += `&${key}=${to.query[key]}`;
}
});
}
}
next(nextPath);
} else {
next();
}
}
dayjs处理时间戳
postcss.config.js处理低版本浏览器前缀
module.exports = {
plugins: {
"autoprefixer": {
browsers: ['ie >= 9', 'last 2 versions',"Firefox >= 30",">2%"]
}
}
}
以上是脚本宝典为你收集整理的Vue-cli3项目处理包括(i18n/font-spider/xss/wangeditor)全部内容,希望文章能够帮你解决Vue-cli3项目处理包括(i18n/font-spider/xss/wangeditor)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。