英文:
404 Error for JavaScript and CSS Files in Vue.js + Node.js App on Live Server
问题
我有一个Vue.js + Node.js应用程序，在我的本地服务器上完美运行。然而，当我将它部署到一个实际服务器时，我遇到了JavaScript和CSS文件的404错误。我已经验证这些文件存在于实际服务器上的正确目录中，并且已经调整了index.html文件中的文件路径。尽管做了这些努力，我仍然无法访问这些文件。
以下是index.html中的相关代码：
client/dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<script type="module" crossorigin src="/assets/index-2b384caf.js"></script>
<link rel="stylesheet" href="/assets/index-d1b70ef7.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
server.js中的相关代码：
const express = require('express');
const cors = require('cors');
const routes = require('./routers');
const app = express();
const path = require('path');
// 从Vue.js客户端构建中提供静态文件
app.use(express.static(path.join(__dirname, '../client/dist')));
app.use(express.json());
app.use(cors());
app.use('/api', routes);
// 对于任何其他路由，提供Vue.js应用程序
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
我已经检查了以下内容：
- 文件存在于实际服务器上的正确目录中。
- index.html文件中的文件路径正确，考虑到服务器的目录结构。
- 服务器配置已设置为从客户端目录提供静态文件。
- 我已清除了浏览器缓存并尝试在隐身窗口中访问这些文件。
尽管进行了这些检查，但我仍然在尝试访问JavaScript和CSS文件时收到404错误。
目录结构：
项目目录
- client（Vue.js）
- server（Node.js）
对于如何排除和解决此问题的任何建议或想法都将不胜感激。谢谢！
英文:
I have a Vue.js + Node.js application that works perfectly on my local server. However, when I deploy it to a live server, I encounter a 404 error for the JavaScript and CSS files. I have verified that the files exist in the correct directories on the live server, and I've adjusted the file paths in the index.html file. Despite these efforts, I still cannot access the files.
Here's the relevant code in index.html:
client/dist/index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<script type="module" crossorigin src="/assets/index-2b384caf.js"></script>
<link rel="stylesheet" href="/assets/index-d1b70ef7.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
server/server.js
const express = require('express');
const cors = require('cors');
const routes = require('./routers');
const app = express();
const path = require('path');
// Serve static files from the Vue.js client build
app.use(express.static(path.join(__dirname, '../client/dist')));
app.use(express.json());
app.use(cors());
app.use('/api', routes);
// For any other routes, serve the Vue.js app
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
I've already checked the following:
The files exist in the correct directories on the live server.
The file paths in the index.html file are correct, taking into account the server's directory structure.
The server configuration is set up to serve static files from the client directory.
I've cleared the browser cache and tried accessing the files in an incognito window.
Despite these checks, I still receive a 404 error when trying to access the JavaScript and CSS files.
directory structure
project directory
- client (vuejs)
- server (nodejs)
Any suggestions or ideas on how to troubleshoot and resolve this issue would be greatly appreciated. Thank you!
答案1
得分: 0
终于我成功修复了问题。实际上，我在/client/vite.config.js文件中配置错误。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
base: '/client/dist/' // 添加了这一行
});
添加了base: '/client/dist/'之后，它就像魔法般地工作了。
英文:
Finally I able to fix the issue. actaully I had wrong configuation on /client/vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
base: '/client/dist/' // added this line
});
after adding base: '/client/dist/' it works like a charm.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论