通过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 -S

2、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 -S

2、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—————