如何解决部署VueJS应用-后端ExpressJS无响应
这是我第一次部署VueJS应用。它是完整堆栈,后端是Express / MySQL。在开发人员模式下一切运行良好。我的开发平台是Windows 10,VS Code。
我目前正在尝试使用本地网络服务器在开发PC上预览应用程序。
为此,我将Vue应用程序构建为服务器/公共服务器。静态站点可以正常运行,但是我似乎无法让Express后端从应用程序或直接访问api的浏览器进行响应。我遵循了Brad Traversy教程中的模型,这是vue.config.js的样子:
const path = require('path');
module.exports = {
outputDir: path.resolve(__dirname,'./server/public'),devServer: {
disableHostCheck: true,proxy: {
'/api': {
target: 'http://localhost:5000'
}
}
},transpileDependencies: ['vuetify'],pluginOptions: {
i18n: {
locale: 'en',fallbackLocale: 'en',localeDir: 'locales',enableInSFC: false,},};
这是Express /后端的index.js。我注释掉了NODE_ENV测试,因为我还没有弄清楚如何正确设置它。这应该只是硬编码要在生产模式下运行的代码。 __dirname指向服务器目录,其中包含Express代码和其他服务器内容。
// Create express app
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
//Create Express App
const app = express();
// Add Middleware
app.use(bodyParser.json());
app.use(cors());
//
const water = require('./routes/api/water');
const waterlog = require('./routes/api/waterlog');
// Direct /api
app.use('/api/water',water);
app.use('/api/waterlog',waterlog);
// Handle production
// if (process.env.NODE_ENV === 'production') {
// Static folder
app.use(express.static(__dirname + '/public/'));
// Handle SPA
app.get(/.*/,(req,res) => res.sendFile(__dirname + '/public/index.html'));
// }
const port = process.env.PORT || 5000;
app.listen(port,() => console.log(`CORS-EnabledServer started on port ${port}`));
我使用(从npm服务)启动Vue应用程序:
serve -s server/public
我想念什么?感觉非常接近,但还没有雪茄...
解决方法
serve
只是一个简单的静态HTTP服务器。它不会运行您的后端。
您的生产版本会将您的前端资产放入Express应用程序的静态服务目录中,因此在构建前端之后您需要做的就是启动服务器
# Build your front-end
npm run build
# Start your Express server,assuming this is configured in package.json
NODE_ENV=production npm start
现在在浏览器中打开http://localhost:5000/
另请参阅https://expressjs.com/en/advanced/best-practice-performance.html#set-node_env-to-production
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。