vue项目的过程的各种坑

这是我参与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)
},
复制代码

最好就是添加消除这个监听,但是有时候加了会报错，我也不知道为啥；所以加不加看情况而定；最好不要挂载太多的，否则会出事的