Vue项目部署的那些坑

最近公司的前端项目要上线，这才发现原来在开发环境跑的很流畅的代码在生产环境中遇到很多坑，在此做一个总结，以免日后再走弯路。

跨域问题

从开发环境切换到生产环境首先面临的是跨域的问题，开发时为了简单就直接在vue里设置的代理，可到了生产环境就不灵了，出来混迟早要还的。多么痛的领悟。。。
首先我们要弄明白什么是跨域，为何会产生跨域。
跨域其实是受制于浏览器的同源策略，那什么又是同源策略呢，维基百科上的解释：

In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.

其中，URI scheme, hostname, port number，即协议、域名、端口号的不同便是跨域请求。

为什么会产生跨域：
因为我们的项目是前后端分离，前端和后端服务都独立运行，即便在同一个服务器，端口也不同。
要解决跨域问题，有几种方案：

通过jsonp跨域
通过修改document.domain来跨子域
使用window.name来进行跨域
使用HTML5中新引进的window.postMessage方法来跨域传送数据
CORS

那就先来说说怎么解决这个问题吧，当然采取了简单粗暴的方法：CORS(Cross-origin resource sharing)方式，在服务端设置响应头：
'Access-Control-Allow-Origin','*'

image.png

Vue的API配置问题

在本地跑的好好的Vue怎么发布到线上就不行了，思来想去觉得是环境问题。原来这是由于开发环境和生产环境的接口地址不同导致，发布后Vue无法访问接口，自然获取不到数据。
那么，如何优雅地解决这个问题，不需要频繁地切换接口地址。
首先，在config中找到以下两个文件：

/config/dev.env.js
/config/prod.env.js

这两个文件就是针对生产环境和发布环境设置不同参数的文件,打开dev.env.js文件，如下：

module.exports = {
    NODE_ENV: '"development"',
    APP_ORIGIN: '"https://wallstreetcn.com"'
}

在NODE_ENV下增加一行：

module.exports = {
    NODE_ENV: '"development"',
    BASE_API: '"http://192.168.0.140:3001"',
    APP_ORIGIN: '"https://wallstreetcn.com"'
}

然后修改prod.env.js:

module.exports = {
    NODE_ENV: '"production"',
    BASE_API: '"http://*.*.*.*:3001"',
    APP_ORIGIN: '"https://wallstreetcn.com"'
};

然后，在项目中这样调用：

// 配置API接口地址
var root = prod.env.BASE_API

Vue项目部署的那些坑

跨域问题

Vue的API配置问题

推荐阅读更多精彩内容