此项目的原作者地址链接:https://github.com/Yaer23/vue-chatroom
然后我照着这个在本地写发现一直在出问题,现在记录一下出现的问题和解决方法,也是各种试才终于成功
先看项目目录:
1.安装socket.io,发现很顺利,接下来就是各种错误
2.然后启动服务端js
什么?没有socket.io,检查了一下,原来是我没有在package.json中配置,开启服务的js也要在这里配置一下
以后再出这种问题可以去这里看看有没有引入。
3.最笨的解决办法,这个项目因为之前做的安装了很多不需要的,还有问题的包,我就直接把modules下的包全删了再重新安装,浪费了很长时间
4.然后终于成功启动了服务端js
5.最坑的来了,使用localhost一直打不开页面,就像这样
这里不知道是什么问题,最后换了一个写法用http://127.0.0.1:8081居然可以了
6.终于登陆进来发消息页面发现加载不了参数:
不停地报这个错,也花了我很久去找,我看了很多网站上对这个问题的解决办法都不一样,我开始以为我的js写错,后来发现不是js,应该先从引入socket.io这里入手,
开始使用<script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
还是有问题又换成<script src="http://127.0.0.1:8081/socket.io/socket.io.js"></script>
报错
最后换成了<script src="http://localhost:8081/socket.io/socket.io.js"></script>
才行。
还是要多试一下才行,在这些错误中也对socket.io的用法有了更深入的理解。
现在把几个页面展示一下:
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>chatroom</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_637013_b0ubbuoti59daemi.css">
</head>
<body>
<div id="app"></div>
<script src="http://localhost:8081/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
- main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import login from './components/login.vue'
import chatRoom from './components/chatRoom.vue'
export default {
name:'App',
components:{
login,
chatRoom
}
}
</script>
<style>
html,body {
margin: 0;
padding: 0;
}
</style>
- index.js
import Vue from 'vue'
import Router from 'vue-router'
import chatRoom from '@/components/chatRoom'
import login from '@/components/login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'login',
component: login
},
{
path: '/chatRoom',
name: 'chatRoom',
component: chatRoom
}
]
})
组件:
- chatRoom.vue
<template>
<div id="chatroom">
<div class="header">
<div class="roomUser">
<p>Ch