为了账号安全,请及时绑定邮箱和手机立即绑定

通过Node.js完美解决Vue-Cli3.0上线时的二大痛点

标签:
Node.js Vue.js

在前端框架的历史中,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—————

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消