配置一个可以使用Vue的History模式的express后端服务

Posted 造轮子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了配置一个可以使用Vue的History模式的express后端服务相关的知识,希望对你有一定的参考价值。

因为大部分情况下都是使用hash模式,因此很少关心History的使用。

最近再次意识熟悉后端才能全面理解项目,于是开始一些相关性研究。下面是History后端服务代码,使用了express框架。使用了ejs模板引擎解析html文件。

const http = require(‘http‘);
const path = require(‘path‘);
var ejs = require(‘ejs‘);  //我是新引入的ejs插件

const express = require(‘express‘);
const app = express();
// 添加中间件,设置从`dist`文件夹中查找文件
app.use(express.static(path.join(__dirname, ‘dist‘)));
app.set(‘views‘, ‘./dist‘) // specify the views directory
app.engine(‘html‘, ejs.__express);

app.set(‘view engine‘, ‘html‘) // register the template engine

app.use(‘*‘,(request, response) => {
    // 这里最后没有调用next扔给下一个中间件,而是直接输出了响应内容
    response.render(‘index‘);
});
// 最后,创建server,并且输出地址
const server = http.createServer(app);
server.listen(3000, () => {
    console.log(‘Listening on %j‘, server.address());
});

  

 

以上是关于配置一个可以使用Vue的History模式的express后端服务的主要内容,如果未能解决你的问题,请参考以下文章

vue路由history模式,后端配置

Vue路由history模式踩坑记录:nginx配置解决404问题

Vue路由history模式踩坑记录:nginx配置解决404问题

Vue项目history模式下nginx如何配置

(转载)vue-router路由使用 history 模式时,后端SpringBoot如何配置

Vue-cli创建项目从单页面到多页面2-history模式