Vue项目开发常见问题和解决方案总结


Posted in Javascript onSeptember 11, 2020

Vue Cli 打包之后静态资源路径不对的解决方法

cli2版本:

将 config/index.js 里的 assetsPublicPath 的值改为 './' 。

build: {
 ...
 assetsPublicPath: './',
 ... 
}

cli3版本:

在根目录下新建 vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改)

module.exports = {
 publicPath: '', // 相对于 HTML 页面(目录相同)
}

Vue cli 3 报错 error: Unexpected console statement (no-console) 解决办法

在项目的根目录下的 package.json 文件中的 eslintConfig:{} 中的 "rules": { 加入"no-console":"off" }, 其它类似报错也是如此

// 示例:
"eslintConfig": {
  "root": true,
  "env": {
   "node": true
  },
  "extends": [
   "plugin:vue/essential",
   "eslint:recommended"
  ],
  "rules": {
   "no-console":"off"
  },
}

axios 取消请求 (如:用户登录失效,阻止其他请求)

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.interceptors.request.use(
  config => {
    config.cancelToken = source.token; // 全局添加cancelToken
      return config;
    },
    err => {
      return Promise.reject(err);
    }
  );
/** 设置响应拦截 **/
axios.interceptors.response.use(
  response => {
    // 登录失效101
    if ( response.data.code===101) {
      source.cancel(); // 取消其他正在进行的请求
      // some coding
    }
    return response;
  },
  error => {
    if (axios.isCancel(error)) { // 取消请求的情况下,终端Promise调用链
      return new Promise(() => {});
    } else {
      return Promise.reject(error);
    }
  }
);

vue-photo-preview图片预览失效问题记录

<img
  class="pic"
  v-for="(item,index) of imgList"
  :key="index"
  :src="item.smallFileName"
  :large="item.fileName"
  preview="0"
  preview-text="症状图片"
>

imgList是异步获取数据的时候在获取数据后需要调用this.$previewRefresh();刷新重置一下,否则~~不生效

以上就是Vue项目开发常见问题和解决方案总结的详细内容,更多关于vue 常见问题和解决方案的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
JavaScript实现简单日历效果
Sep 11 #Javascript
vue $mount 和 el的区别说明
Sep 11 #Javascript
JavaScript 判断数据类型的4种方法
Sep 11 #Javascript
jQuery实现日历效果
Sep 11 #jQuery
JS实现密码框效果
Sep 10 #Javascript
JavaScript常用工具函数库汇总
Sep 17 #Javascript
el-form 多层级表单的实现示例
Sep 10 #Javascript
You might like
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Python代码需要缩进吗
2020/07/01 Python
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
电子信息工程专业自荐书
2014/06/24 职场文书
七一建党节演讲稿
2014/09/11 职场文书
劳动模范获奖感言
2015/07/31 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
Python学习之时间包使用教程详解
2022/03/21 Python