这是我参与11月更文挑战的第27天,活动详情查看:2021最后一次更文挑战
在我们使用vue开发的时候会发现有各种各样的bug,今天就来记录下我再开发的时候产生的一些bug,一些坑。
1、vue打包之后页面时空白的
在config文件夹下的index.js中,找到
assetsPublicPath: '/'
然后改成
assetsPublicPath: './'
复制代码
2、项目打包的时候会发现打包的文件里面有很多非常大的.map
后缀的文件,那我们要怎么去操作,让在项目进行打包的时候不要生成这些文件
在config/index.js
里面找到
productionSourceMap: true,
//改成false
productionSourceMap: false,
复制代码
3、在开发的时候,我们会用到很多console的调试,在开发完成的时候,又不想一个个去注释,所以在打包的时候可以在build文件夹中找到webpack.prod.conf.js文件中添加以下代码
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
//过滤console.log-start
drop_console: true,
pure_funcs: ['console.log']
//过滤console.log-end
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
复制代码
4、vue打包的时候,elementUI的图标变成了小方框无法显示的解决办法
在vue的build文件夹找到utils.js文件,然后在下面这个位置添加 publicPath: '../../'
function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //加这个
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
复制代码
5、vue跳转外部链接
这个方法会在跳转的时候再url前面添加原来的路径地址
let routeUrl = this.row.html
window.open(routeUrl, '_blank');
复制代码
这个只能在原来页面跳转。不会新开窗口
window.location.href=routeUrl
复制代码
6、vue消除url上面的#
符号
在router的index.js的里面添加mode:'history',
export default new Router({
mode:'history',//加入这个
routes: [
{
path: '/cxyz',
name: 'cxyz',
component: cxyz,
meta:{requireAuth:true}
},
]
})
复制代码
7、使用window.onresize
来监听屏幕的宽高
只会跑一次,多个页面使用会导致失效,所以视情况而定
mounted() {
var that = this;
window.onresize = function(){ // 定义窗口大小变更通知事件
that.screenWidth = document.documentElement.clientWidth; //窗口宽度
that.screenHeight = document.documentElement.clientHeight; //窗口高度
};
}
复制代码
8、使用window.addEventListener
来做监听
//方法methods中
handleScroll() {
let scroll = this.$refs.chatlists.scrollTop;
console.log(scroll);
},
复制代码
mounted(){
window.addEventListener('scroll', this.handleScroll,true)
},
复制代码
最好就是添加消除这个监听,但是有时候加了会报错,我也不知道为啥;所以加不加看情况而定;最好不要挂载太多的,否则会出事的