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

 更新时间:2020年09月11日 08:47:47   作者:大明的IT笔记  
这篇文章主要介绍了Vue项目开发常见问题和解决方案总结,帮助大家更好的利用vue开发,感兴趣的朋友可以了解下

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 常见问题和解决方案的资料请关注脚本之家其它相关文章!

相关文章

  • vue2.0+ 从插件开发到npm发布的示例代码

    vue2.0+ 从插件开发到npm发布的示例代码

    这篇文章主要介绍了vue2.0+ 从插件开发到npm发布的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 深入理解Vue的数据响应式

    深入理解Vue的数据响应式

    Vue.js的核心包括一套“响应式系统”。“响应式”,是指当数据改变后,Vue会通知到使用该数据的代码。例如,视图渲染中使用了数据,数据改变后,视图也会自动更新。
    2021-05-05
  • 使用websocket和Vue2中的props实时更新数据方式

    使用websocket和Vue2中的props实时更新数据方式

    这篇文章主要介绍了使用websocket和Vue2中的props实时更新数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue项目中如何安装element组件

    Vue项目中如何安装element组件

    这篇文章主要介绍了Vue项目中如何安装element组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue项目中页面底部出现白边及空白区域错误的问题

    vue项目中页面底部出现白边及空白区域错误的问题

    这篇文章主要介绍了vue项目中页面底部出现白边及空白区域错误的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue跳转页面的几种常用方法实例总结

    vue跳转页面的几种常用方法实例总结

    Vue是一种流行的JavaScript框架,用于构建用户界面,在Vue中,页面跳转通常使用路由(Router)来实现,除此之外还有很多方法,这篇文章主要给大家介绍了关于vue跳转页面的几种常用方法,需要的朋友可以参考下
    2024-05-05
  • 简单了解Vue computed属性及watch区别

    简单了解Vue computed属性及watch区别

    这篇文章主要介绍了通过实例解析Vue computed属性及watch区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue this.reload 方法 配置

    vue this.reload 方法 配置

    这篇文章主要介绍了vue this.reload 方法 配置,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue el-table实现自定义表头

    vue el-table实现自定义表头

    这篇文章主要为大家详细介绍了vue el-table实现自定义表头,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • element-plus/element-ui走马灯配置图片及图片自适应的最简便方法

    element-plus/element-ui走马灯配置图片及图片自适应的最简便方法

    走马灯功能在展示图片时经常用到,下面这篇文章主要给大家介绍了关于element-plus/element-ui走马灯配置图片及图片自适应的最简便方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03

最新评论