vue项目中常见开发技巧及问题解决

最新推荐文章于 2024-04-29 12:10:51 发布

转载最新推荐文章于 2024-04-29 12:10:51 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pengzhixin/p/7717173.html

文章标签：

#javascript #webpack #ViewUI

本文介绍Vue.js中为第三方组件添加原生事件的方法、IE浏览器中Promise的支持问题及解决方案、跨域请求的多种处理方式，以及解决生产环境中背景图片路径错误的问题。

给组件添加原生事件

对于第三方框架或者一些封装的内置组件，如果想绑定事件，需要再v-on上添加修饰符.native

<my-component v-on:click.native="doTheThing"></my-component>

使用promise之后，IE浏览器不识别（IE9+），报错

因为整个IE系列都不支持promise的缘故，所以无法使用promise，这里需要用到一个垫片

npm install es6-promise

// 在main.js中引入
require('es6-promise').polyfill()

跨域问题

经常遇到的报错No 'Access-Control-Allow-Origin' header is present on the requested resource.

1：CORS，前后端都对应配置，IE10+

2：nginx反向代理

线下开发，如果使用了vue-cli，里面的webpack引入了proxyTable可以做接口反向代理

// 在config目录下的index.js

proxyTable: {
  "/bp-api": {
    target: "http://pengzhixin.com",
    changeOrigin: true,
    // pathRewrite: {
    //   "^/api": "/"
    // }
  }
}
  
// target: api代理的实际路径
// changeOrigin: 改变源头
// pathRewrite: 路径重定向

除此之外，jsonp请求可以，但局限性很多。

生产环境中背景图片消失

在开发环境中，背景图片都显示正常，但是一打包上传到生产环境就发现有一些背景图片无法正常显示，观察DOM发现图片路径指向错误了。

// build/webpack.bas.conf.js
module:{
  rules:[
    {
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }
    }
  ]
}

由于vue-cli的默认配置，小于10k的资源都会打包成base64，所以没有这个问题。

我们发现发生问题的都是大于10k的静态图片资源。

如果你使用了路由懒加载，也不会出现这个问题，因为路由懒加载最终的css是以style标签插入到index.html里面的。

我们还可以使用import或require引入这些过大的图片然后写成行内样式。但最简单的方法是以下这种：

// 在build/utils.js文件中的generateLoaders函数中加上publicPath配置项
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../',
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

转载于:https://www.cnblogs.com/pengzhixin/p/7717173.html