如何在 Node.js 服务器（Express）上部署我的 Vue CLI 应用程序？

Question

我已经使用 VueCLI 构建了我的项目网站，所以现在我想在我的服务器 Node.js 上部署我的应用程序。 问题是 ： - 当我运行命令 build 以获取 dist 文件夹并将其放入我的 nodejs 服务器时，我无法使用我的 vue 路由器，因为例如：http://server.com/page1 它向服务器发出请求但我只想访问该页面在带有Vue路由器的应用程序中。

'这是一个使用vue router的单页网站'

我的 node.js 服务器示例：

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


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

app.get('/',(req,res)=>{
res.sendFile(__dirname+'/static/index.html')
})

app.listen('3000',()=>{
console.log("listen on port 3000");    
})

/site.com
/site.com/dist
/site.com/dist/css
/site.com/dist/js
/site.com/dist/index.html
/site.com/index.js //server nodejs

我希望能够访问我的 vue 路由器网站的内部页面。 当我在 url 中询问页面时，它会询问服务器。

Answer 1

• 显然要解决我的问题，我必须安装和配置一个 来自 github 的中间件调用“connect-history-api-fallback” 'https://github.com/bripkens/connect-history-api-fallback'。这个 API 仅适用于在 Node.js 上运行并使用 express 的服务器（这是我的 案例）。

---

• 但是如果你想配置你的服务器 nginx,apache ... 全部你 需要做的是在官方网页上找到你的conf 'https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations'。

希望这对你有帮助 =)

Answer 2

这是一个项目组织问题。我建议你在你的应用程序之外生成你的 dist。并且有

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

指向 dist 而不是 static 即

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