Vue项目开发常见问题和解决方案汇总(持续整理)

Vue6 个月前2473

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();刷新重置一下,否则~~不生效

0 条评论

暂无评论