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;
  },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值