为了提高我的技能（对于 Web 方面的技能非常低），我最近启动了一个项目，使用 Vue（用于前端）、Vite（用于构建）、Nginx（用于部署）作为技术堆栈。
我的问题是，当我在本地部署并尝试访问 localhost:8080 时，我收到状态错误 500 并且不明白为什么。
此外，我在检查模式的源选项卡中看不到除此之外的任何内容。
请耐心等待下面的代码墙，不幸的是我真的无法缩小问题所在，但我希望一些更有经验的开发人员可以。
预先感谢您的任何提示或帮助。
这是文件夹结构：
├── Makefile
├── app
│ ├── capacitor
│ │ └── capacitor.config.ts
│ ├── dist
│ ├── # NOTE: This directory is built from the `web-builder` docker compose service
│ │ ├── css
│ │ │ └── chunk-vendors.a51efc20.css
│ │ ├── index.html
│ │ └── js
│ │ ├── app.38461d29.js
│ │ ├── app.38461d29.js.map
│ │ ├── chunk-vendors.6a82c935.js
│ │ └── chunk-vendors.6a82c935.js.map
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── index.html
│ ├── src
│ │ ├── App.vue
│ │ ├── main.js
│ │ ├── router
│ │ │ └── index.js
│ │ └── views
│ │ └── Home.vue
│ └── vite.config.js
├── docker-compose.yml
├── dockerfiles
│ ├── android-build.Dockerfile
│ ├── web-build.Dockerfile
│ ├── web-serve.Dockerfile
├── scripts
│ └── generate-env.sh
└── server
└── nginx.conf
这是负责构建
distweb-build.DockerfileFROM node:20-alpine AS build
COPY app /app
WORKDIR /app
RUN npm install && npm install @vue/cli-service
CMD npx vue-cli-service build
这是负责部署
distweb-serve.DockerfileFROM nginx:stable-alpine
COPY /app/dist /usr/share/nginx/html/
COPY /server/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
这是将它们组合在一起的 docker compose 文件的相关部分：
services:
web-builder:
build:
dockerfile: dockerfiles/web-build.Dockerfile
volumes:
- ./app/dist:/app/dist
web-server:
build:
dockerfile: dockerfiles/web-serve.Dockerfile
ports:
- "8080:80"
这是
vite.config.jsimport {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
// base: './',
root: '.',
build: {
outDir: 'dist',
emptyOutDir: true,
rollupOptions: {
input: {
main: 'public/index.html'
}
},
manifest: true
},
publicPath: '/'
});
这是
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Urban Umbrella</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="../src/main.js"></script>
</body>
</html>
这是
main.jsimport {createApp} from 'vue';
import App from './App.vue';
import {createRouter, createWebHistory} from 'vue-router';
import routes from './router';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
import {createBootstrap} from 'bootstrap-vue-next';
const router = createRouter({
// history: createWebHistory(),
routes,
});
const app = createApp(App);
app.use(createBootstrap());
app.use(router);
app.mount('#app');
这是
App.vue<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App',
});
</script>
这是
router.jsimport {createRouter, createWebHistory} from 'vue-router';
import Home from '../views/Home.vue';
const routes = [
{path: '/', component: Home},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
最后，这是
config.nginxuser nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events
{
worker_connections 1024;
}
http
{
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
server
{
listen 80;
server_name localhost;
location /
{
root /app;
index index.html;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html
{
root /usr/share/nginx/html;
}
}
}
所以，解决方案是从index.html中
删除这一行：
<script type="module" src="./main.js"></script>
并添加以下文件，
vue.config.jsimport HtmlWebpackPlugin from 'html-webpack-plugin';
export default {
configureWebpack: {
entry: {
app: './src/main.js',
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
inject: true,
chunks: ['app'],
}),
],
},
};
由于某种原因，构建中缺少
main.js