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 常见问题和解决方案的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • VUE项目初建和常见问题总结

    拿猫眼为例: 步骤: 需要预装node.js 1. 查看node版本,控制台输入 node -v v10.16.1 2. 查看vue版本 vue -V (Vue不是内部或外部命令...)--执行步骤3 3. 安装@vue/cli脚手架 npm i -g @vue/cli 4. 创建新项目 vue create maoyan 1.Please pick a preset: Manually select features Check the features needed for your pro

  • vue项目中常见问题及解决方案(推荐)

    webpack项目中自动引入全局scss变量文件 假设我们有一个公共的scss变量文件variables.scss /*存放所有全局变量*/ $card-title:#C7D200; //首页 卡片标题颜色 $bc-color:#182037; $hoverColor: #7abef9; //链接hover颜色 $fontColor: #E6EFFF; //字体颜色-白色 webpack要识别scss,需要先安装sass的loader npm install --save-dev sass-lo

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • Vue2.0使用过程常见的一些问题总结学习

    最近在学习Vue,今天正好写个学习笔记,把以前遇到的错误给总结一下. Vue目前的的开发模式主要有两种: 1.直接页面级的开发,script直接引入Vue 2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack可以进行配置,配置多文件入口,进行多页面开发 第二种Vue开发,结合webpack打包完文件会很大,怎么解决这个问题? 1.webpack代码拆分:code-spliting 2.提取公共(如提取css,js) 3.预渲染:使

  • 从零到一详聊创建Vue工程及遇到的常见问题

    准备工作 1.判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm install -g cnpm --registry="cnpm"全局安装淘宝cnpm. 2.开发工具选择很多,VUE无专用开发工具,开发项目多以SPA形式体现,本例使用 Visual Studio Code. 3.调试工具选择很多,官方推荐 vue-devtools . 安装方法:FQ或者github主页.https://github.com/vuejs/vue-devtools下载

  • vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题

    web端的微信支付可分为JSAPI与H5 JSAPI使用场景为微信内部,而H5支付则是使用在非微信下的外部浏览器. 1.JSAPI 在微信内部可以直接唤起微信浏览器的内置对象 WeixinJSBridge 废话不多说直接上代码: // 调用后端接口拿到JSAPI支付所需参数,我在beforeRouteEnter的时候调用. api.apply.jsApiPay(obj).then(res => { if (res.data.code === '0000') { vm.params = res.d

  • Vue优化:常见会导致内存泄漏问题及优化详解

    如果你在用 Vue 开发应用,那么就要当心内存泄漏的问题.这个问题在单页应用 (SPA) 中尤为重要,因为在 SPA 的设计中,用户使用它时是不需要刷新浏览器的,所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效.因此在vue开发过程中,你需要时刻警惕内存泄漏的问题,这些内存泄漏往往会发生在使用 Vue 之外的其它进行 DOM 操作的三方库时,请确保测试应用的内存泄漏问题并在适当的时机做必要的组件清理. 下面是我开发过程中遇到,并查资料总结的内存泄漏问题,会持续更新中

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

    Vue Cli 打包之后静态资源路径不对的解决方法 cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } cli3版本: 在根目录下新建 vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改) module.exports = { publicPath: '', // 相对于 HTML 页面(目录相同) } Vue cli

  • vue项目开发中setTimeout等定时器的管理问题

    一.问题来源. 在项目中,我们经常有这样的需求,一个页面初始化后,需要不断的去请求后端,来获取当前某个记录的最新状态. 显然,这个可以用setTimeout以及回调中继续setTimeout来实现. 我们假设定时器是在页面#/test/aaa上创建的. 但是,会遇到以下两个问题,我从#/test/aaa   这个页面切换到  #/test/bbb页面后如果停留在#/test/bbb,定时器还在跑. 其次,如果我不断在#/test/aaa 和 #/test/bbb两个页面之间不断的切换,而且切换时

  • node vue项目开发之前后端分离实战记录

    前言 本文主要介绍了关于node vue前后端分离的相关资料,分享出来供大家参考学习,下面随着小编来一起学习学习吧. node vue项目开发 最近看了近一周的vue开发,有诸多感触,我之前接触过react.angular所以特别想学学久仰大名的vue.学习半天以后发现,接触到的东西多了,学习起来就是容易很多,vue的指令我能个联想到angular的指令,vue组件化设计类似于react的组件化设计,包括一些router的设置跟react里的路由或者nodejs里的路由都差不多,vuex更是根据

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

  • Vue项目中跨域问题解决方案

    方法 后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 打开config/i

  • 微信小程序开发常见问题及解决方案

    微信小程序开发常见问题及解决方案

    前言 我们在做微信小程序开发的过程中,总会遇到各种奇葩的问题.今天就把我在小程序开发过程中遇到的各种问题,及对应的解决方案总结在这里,方便以后自己回顾,也方便大家查看. 云开发相关 一 云函数调用失败问题 [云函数] [login] 调用失败 Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail requestID , cloud function service erro

  • Vue项目中props传值时子组件检测不到的问题及解决

    Vue项目中props传值时子组件检测不到的问题及解决

    目录 props传值时子组件检测不到 props用法和传值问题 基本用法 props的使用 单向数据流:props是单向绑定的 总结一下props传值的注意点 props传值时子组件检测不到 我们在Vue项目开发的过程中,经常会需要在父子组件传值,我们都知道,父子组件传值的时候是通过 props 来进行的,但是在父组件的数据动态改变的时候,子组件却接收不到最新变化的数据,这个时候怎么办呢? 首先,传值不能用驼峰命名法,因为vue语法中规定HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大

  • vue项目实战总结篇

    这篇文章把小编前段时间做的vue项目,做个完整的总结,具体内容请参考本文. 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署. 废话不多说了.干货直接上. 一. 必须node环境, 这次就不写node环境的安装了.过两天我会写个node环境的安装随笔. 二. node环境配好后.开整vue. 1. 安装vue脚手架. npm install -g vue-cli 2. 用脚手架搭项目(只是一行命令) vue init webpack-simple (项目名字) 或 vue init w

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

随机推荐