Nodejs后端配置关于vue打包之后

发布于 1周前 作者 h691938207 来自 nodejs/Nestjs

Nodejs后端配置关于vue打包之后

关于使用 vue 路由的 history 模式。

在打包后的文件里有一个 index.html. 我想通过 node 启动一个服务器,去模拟真实服务器的状态。 看了 vue 的官方文档,提示我用一个第三方的 connect-history-api-fallback 去 redict 地址。。。

但是我配置过后死活不行,页面通过点击进入其他的路由是可以的,一刷新就没了,报 404.

这是我 nodejs 的配置,直接放在 index.html 文件夹内部的

const express = require('express') const webpack = require('webpack')

const app = express()

var history = require('connect-history-api-fallback'); // // handle fallback for HTML5 history API ///启动的时候使用了 node 服务器.....所以不会出问题了。。。

var middleware = history({

rewrites: [ { from: /^/.*$/, to: function(context) { return '/'; } } ], verbose: true, disableDotRule: true, htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'] })

app.use(express.static(__dirname)) app.use(middleware)

const port = process.env.PORT || 8089 module.exports = app.listen(port, () => { console.log(Server listening on http://localhost:${port}, Ctrl+C to stop) })

////刷新的时候没有了。。。


Harmonyos Next教程
7 回复

1，用路由控制；
2，路由规则泛匹配；
eg:

app.use(’/*’,function(req,res,next){
res.sendFile(’…/public/index.html’);
});

这样拦截所有的根请求都会发 index 首页过去，然后前端再渲染


router.get(/^/[^.]*$/, async (ctx, next)=>{
const { status, body } = await readFile(serverFile + ‘/index.html’);

ctx.state = status;
ctx.type = ‘text/html’;
ctx.body = body;

await next();
});

我后端用的是 koa2 服务器，所有的 /Path/To 格式的 不匹配带扩展名的 url 都定向到 index.html，express 同理

这个成功了…相当于我不用 (‘connect-history-api-fallback’),官方推荐的插件了。。也可以,奇怪,官网竟然没有推荐你这种模式

对的,应该可以了,但是使用官方推荐 history 插件,死活不回重新指向 index.html,可能我的配置路径写的有问题？

https://www.xiejiahe.com/detail/59b264ae35f4275c5c081d06 我的小结。

vuejs 用的是 HTML5 pushstate，你可以直接用 nginx 之类的设置就好了，不需要用 nodejs 来路由

在Node.js后端配置Vue打包后的文件，通常涉及将Vue前端项目构建后的静态资源（如HTML、CSS、JS等）托管在Node.js服务器上。以下是一个基本的步骤和示例代码，假设你已经使用Vue CLI生成了前端项目，并且已经通过npm run build命令打包了项目。

  1. 构建Vue项目： 在Vue项目根目录下运行：

    npm run build

    这将生成一个dist目录，里面包含了所有打包后的文件。

  2. 配置Node.js服务器： 使用express框架来托管这些静态文件。首先，确保你已经安装了express：

    npm install express

  3. 创建或修改Node.js服务器代码（例如server.js）：

    const express = require('express');
const path = require('path');
const app = express();

const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

  4. 运行Node.js服务器： 在server.js所在目录运行：

    node server.js

现在，你的Node.js服务器应该能够托管Vue打包后的静态文件，并且可以通过http://localhost:3000访问你的Vue应用。

回到顶部