Synology上Linuxserver/code-server部署Vue.js应用白屏问题求助

1. 修正Vue开发服务的绑定地址 #

Vue默认开发服务仅绑定localhost，容器外无法正常获取资源，需修改配置让服务监听所有网卡：

• 若用Vite构建，修改项目根目录的vite.config.js：

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 5173
  }
})

• 若用Vue CLI，修改vue.config.js：

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 5173
  }
}

修改后重启开发服务。

2. 验证Docker端口映射配置 #

进入群晖Docker管理界面，找到code-server容器：

• 检查端口设置，确保容器内5173端口已映射到群晖主机的对应端口（如主机5173→容器5173），映射类型为TCP。
• 若用命令行启动容器，确认启动参数包含-p 5173:5173。

3. 针对Firefox报错定位资源问题 #

打开Firefox开发者工具（F12），查看控制台和网络标签：

• 若出现404 Not Found：检查资源请求URL是否带错误前缀（比如code-server代理路径），需在Vite配置中添加server.origin指向代理地址：

  server: {
    origin: 'http://你的群晖IP:code-server端口/proxy/5173'
  }
  

• 若出现CORS错误：在Vite配置中开启CORS允许：

  server: {
    cors: true
  }
  

• 若资源加载超时：确认群晖防火墙已开放对应端口，或容器内网络可正常访问外部资源。

4. 检查code-server代理权限 #

进入code-server设置（左下角齿轮→Settings）：

• 搜索Proxy，确认Proxy: Allow Ports包含5173，或设为*允许所有端口。
• 重启code-server使配置生效。

5. 容器内部服务自测 #

进入code-server容器终端，执行curl http://localhost:5173：

• 若返回正常Vue入口HTML，说明容器内服务正常，问题出在端口映射或外部代理。
• 若返回空白/错误，检查npm依赖是否安装完整，或服务启动日志的报错信息。

内容的提问来源于stack exchange，提问作者Cryptor