vue的一些笔记

一、npm run build 打包之后界面空白报错，解决方法如下：将build中assetsPublicPath的路径改为'./'，

打包之后可以直接打开dist下的index.html

二、npm run build之后打开index.html-------------font-awesome引用路径报错，

解决办法：将webpack.base.conf.js中的test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,的options注释掉

三、vue 中引入jQuery报错$ is not defined
解决方法：
在webpack.base.conf.js中
1.添加以下内容：

const webpack = require('webpack')；

2.在module.exports的尾部加入

plugins: [
    // 配置全局使用 jquery
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    })
  ]

3.修改完成之后要npm run dev

四、在main入口文件中引入/bootstrap/dist/js/bootstrap.min.js报错

根据提示如下：

问题解决！

五、实现缓存keepAlive
1.在路由中meta中添加keepAlive属性

2.激活keepAlive
App.vue:

3.在需要缓存的页面使用beforeRouteEnter和activated

beforeRouteEnter(to, from, next) {
    if(from.name=='AccidentDetails'){
          to.meta.isBack=true;
          //判断是从哪个路由过来的，
          //如果是details过来的，表明当前页面不需要刷新获取新数据，直接用之前缓存的数据即可
      }
      next();
  },
 ...
 activated(){
      if(!this.$route.meta.isBack ||this.isFirstEnter){
          if(this.selectNews != ''){
              this.selectNews = '';
          }else{
              this.baseData = [];
              this.tableData = [];
              this.requestData();
          }
      }
      this.$route.meta.isBack = false;
      this.isFirstEnter = false;
  },