Skip to content

Latest commit

 

History

History
119 lines (84 loc) · 3.86 KB

问题总结.md

File metadata and controls

119 lines (84 loc) · 3.86 KB
Raw

一、生成的css文件中引用外部资源路径问题

项目在开发模式下css中用url（）引用图片是正常的，但是打包后图片路径却并没有被处理或者说特别怪异，导致本地图片资源无法加载。

图片采用了url-loader加载，如果小于10kb，图片则被转化成 base64 格式的 dataUrl。而css中大于10kb的图片，则连同css文件被打包进了js文件中，如果接受不了，可以强制把css从js文件中独立出来。

经常遇见的问题是 css 中 background-image 的相对路径不能正确的引用到 img 文件夹中。但是用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。

对于用 vue-cli 生成的项目，dist 目录结构如下：

dist
├── index.html
└── static
    ├── css
    ├── img
    └── js

更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // 注意配置这一部分，根据目录结构自由调整
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

最后附上 extract-text-webpack-plugin 的文档

reference:

vuejs/vue-loader#481

二、开发和生产环境下的跨域问题

因为后台使用的接口是百度图片api，所以获取资源势必会产生跨域问题。 在项目中使用的是axios，作为轻量级http请求客户端，只封装了基础的http请求。 想要解决跨域问题，还需要进行额外的配置。

最简单的方法是在后台服务器进行代理转发，在开发环境和生产环境的解决方案如下：

1. 开发环境下，进行跨域资源访问

vue-cli的config文件里有一个参数叫proxyTable。在vuejs-templates，也就是vue-cli的使用的模板插件里，有关于API proxy的说明，使用的就是这个参数。 https://vuejs-templates.github.io/webpack/proxy.html 这个参数主要是一个地址映射表，你可以通过设置将复杂的url简化，例如我们要请求的地址是api.xxxxxxxx.com/list/1，可以按照如下设置：

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

这样我们在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1. 那么又是如何解决跨域问题的呢？其实在上面的'list'的参数里有一个changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。增加的代码如下所示：

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

vue-cli的这个设置来自于其使用的插件http-proxy-middleware github 深入了解的话可以看该插件配置说明，似乎还支持websocket，很强大的插件

2. 生产环境下跨域资源访问

使用nginx进行代理转发。

例如，我就将本地主机http请求

XXXXX/searchImg/代理到 https://image.baidu.com上，

并使用rewrite，将匹配到的url重写到百度image 的接口路径上。

/searchImg/ ——> /search/acjson 

server {
    listen 80;
    root /home/ubuntu/project;

    server_name project.zyy1217.com;

    location / {
            try_files $uri $uri/ =404;
    }
    location ~ /searchImg {
            rewrite ^(.*)$ /search/acjson  break;
            proxy_pass  https://image.baidu.com;
      }
}