Vue.js+Socket.io+Node.js开发聊天应用启动提示需启用JavaScript报错如何解决

你看到的"We're sorry but app doesn't work properly without JavaScript enabled."是Vue CLI生成项目时默认写入public/index.html的

• 你前端的接口请求、Socket.io连接默认请求了Vue开发服务器的地址（通常是http://localhost:8080），没有指向你的Node.js后端服务地址
• Vue开发服务器匹配不到对应的接口路由，就会返回单页应用的入口index.html文件，所以接口响应里就包含了这段noscript标签的内容

• 修正Vue项目main.js的语法错误，同时指定Socket.io的连接地址（替换为你实际的后端服务端口）

import Vue from 'vue'
import App from './App.vue' // 原代码漏写了结尾单引号，此处补全

import { io } from "socket.io-client";
// 填写你Node.js后端实际的服务地址
const socket = io("http://localhost:替换为你的后端端口");

// 可选：添加连接成功日志用于验证
socket.on("connect", () => {
  console.log("Socket连接成功，ID：", socket.id);
});

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

• 统一配置前端接口请求的服务地址
  你所有后端接口请求都需要指定后端服务地址，不要使用相对路径。以常用的axios为例，添加全局配置：

import axios from 'axios'
// 替换为你实际的后端服务地址
axios.defaults.baseURL = 'http://localhost:替换为你的后端端口'

如果是通过vue.config.js配置开发代理转发请求，需要检查代理规则是否正确将接口前缀转发到后端服务地址。

• 后端CORS配置保持一致即可，当前的配置只要前端运行在8080端口不会产生跨域问题。

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