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 相关文章推荐
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
angular多语言配置详解
May 16 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 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桌面中心(四) 数据显示
2007/03/11 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP的PDO连接讲解
2019/01/24 PHP
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python 获取项目根路径的代码
2019/09/27 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
《黄山奇石》教学反思
2014/04/19 职场文书
社会工作专业自荐信
2014/09/26 职场文书
房产分割协议书范文
2014/11/21 职场文书
中层干部考核评语
2015/01/04 职场文书
五年级数学教学反思
2016/02/16 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
pycharm无法安装cv2模块问题
2022/05/20 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS