通过Node.js完美解决Vue-Cli3.0上线时的二大痛点
通过Node.js完美解决Vue-Cli3.0上线时的二大痛点
在前端框架的历史中，React 和 Angular 一直都处于主角的位置。其间，有众多的新框架试图冲杀进来分一杯羹，但都未成功，除了 Vue。
作为一个比 React 和 Angular 都更年轻的框架，Vue 自打去年在GitHub上的star数量超过React之后，其势如破竹的增长势头好像一直就未曾停歇过！
Vue 有一个与React 的 create-react-app 非常相似的官方CLI 工具：Vue CLI 。Vue CLI 为新开发的应用程序提供了脚手架。
当然，这里标题所说的痛点并非是 Vue CLI 的缺点，而是将通过Vue CLI 开发完工的项目，在放置于Node服务中之前，所需要考虑的两件事情！
一、路由history模式，打包之后运行找不到页面
大家都知道vue-router旗下有 hash 与 history两种模式。两者的区别：一丑!一俊！
history俊归俊，但history外表的洒脱并没有小伙伴们所想象的那么潇洒！
因为我们一旦将项目打完包并让其正式开工干活时，你会发现浏览器刷新时居然会找不到地址，没错！是找不到地址！这哪里还有俊的痕迹？
原因：URL 匹配不到任何静态资源。
解决方法：通过重写URL的方式对服务器进行配置，将匹配不到的URL，全部指向app所依赖的页面：index.html。
解决步骤：
1、下载依赖包：connect-history-api-fallback
cnpm install connect-history-api-fallback -S2、server.js代码：
const express = require("express");
const history = require("connect-history-api-fallback");
const app = express();
app.use(history({
// index:"index.html",->index属性默认值为指向index.html
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
}));
app.use(express.static(__dirname+"/dist"));
app.listen(80,function () {
console.log("success");
});3、目录结构：
二、proxy代理跨域请求只有在生产环境中有效
proxy在vue-cli3.0以上，可以通过修改vue.config.js来配置，例如：
module.exports = {
devServer:{
proxy:{
"/zhang":{
target:"http://www.zhangpeiyue.com",
changeOrigin:true,
pathRewrite:{
"^/zhang":"/"
}
}
}
}
}以上设置，在开发环境中能实现跨域获取接口数据。但是打包后在生产环境接口会报错404！
原因：打包以后生成的是一堆静态资源，哪里还会有proxy的身影？
解决方法：通过Node.js在生产环境中实现proxy。
具体步骤：
1、下载依赖包：http-proxy-middleware
// 用于把请求代理转发到其他服务器的中间件。
cnpm install http-proxy-middleware -S2、server.js代码：
const express = require("express");
const proxy = require("http-proxy-middleware");
const app = express();
app.use("^/zhang",proxy({
target:"http://www.zhangpeiyue.com",
changeOrigin:true,
pathRewrite:{
"^/zhang":"/"
}
}))
app.use(express.static(__dirname+"/dist"));
app.listen(80,function () {
console.log("success");
})最后奉上server.js完整代码：
const express = require("express");
const proxy = require("http-proxy-middleware");
const history = require("connect-history-api-fallback")
const app = express();
// 解决history问题
app.use("^/zhang",proxy({
target:"http://www.zhangpeiyue.com",
changeOrigin:true,
pathRewrite:{
"^/zhang":"/"
}
}))
// 解决proxy问题
app.use(history(
{
// index:"index.html",->index属性默认值为指向index.html
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
}
));
app.use(express.static(__dirname+"/dist"));
app.listen(80,function () {
console.log("success");
})—————END—————