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

相关文章

  • 详解vue静态资源打包中的坑与解决方案

    详解vue静态资源打包中的坑与解决方案

    本篇文章主要介绍了详解vue静态资源打包中的坑与解决方案,本文主要解决路径问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue 中常用操作数组的方法(forEach()和reduce())

    vue 中常用操作数组的方法(forEach()和reduce())

    文章介绍了JavaScript中常用的操作数组方法,包括forEach()和reduce(),forEach()用于遍历数组并对每个元素执行操作,而reduce()则用于遍历数组并进行累加等迭代操作,感兴趣的朋友一起看看吧
    2025-03-03
  • vue 权限认证token的实现方法

    vue 权限认证token的实现方法

    这篇文章主要介绍了vue 权限认证token的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • element-ui中的select下拉列表设置默认值方法

    element-ui中的select下拉列表设置默认值方法

    今天小编就为大家分享一篇element-ui中的select下拉列表设置默认值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue + Scss 动态切换主题颜色实现换肤的示例代码

    Vue + Scss 动态切换主题颜色实现换肤的示例代码

    这篇文章主要介绍了Vue + Scss 动态切换主题颜色实现换肤的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Vue3使用echarts绘制仪表盘

    Vue3使用echarts绘制仪表盘

    这篇文章主要为大家学习介绍了Vue3如何使用echarts实现绘制仪表盘,文中的示例代码积极学习,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-07-07
  • vue  composition-api 封装组合式函数的操作方法

    vue  composition-api 封装组合式函数的操作方法

    在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数,这篇文章主要介绍了vue  composition-api 封装组合式函数的操作方法,需要的朋友可以参考下
    2022-10-10
  • 基于Vue开发数字输入框组件

    基于Vue开发数字输入框组件

    本文通过实例代码给大家介绍了基于Vue开发数字输入框组件,需要的朋友可以参考下
    2017-12-12
  • vue封装组件js版基本步骤

    vue封装组件js版基本步骤

    这篇文章主要为大家介绍了vue封装组件js版基本步骤,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • Vue-cli3.X使用px2 rem遇到的问题及解决方法

    Vue-cli3.X使用px2 rem遇到的问题及解决方法

    这篇文章主要介绍了Vue-cli3.X使用px2rem遇到的问题及解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08

最新评论