vue.js开发环境搭建以及访问页面http://localhost:8080问题解决

CentOS 6.8下安装vue.js

1.安装node.js

[root@node6 ~]# curl -sL https://rpm.nodesource.com/setup_8.x | bash -

注：这里我是安装的v8.11.3版本的，8.x表示v8版本

[root@node6 ~]# sudo yum install -y nodejs

验证结果，有如下信息表示安装成功。

[root@node6 ~]# node -v
v8.11.3
[root@node6 ~]# npm -v
5.6.0

2.安装淘宝npm镜像

[root@node6 ~]# npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

[root@node6 ~]# cnpm install -g vue-cli

4.创建项目

[root@node6 ~]# npm init webpack helloworld

5.安装依赖

[root@node6 ~]# cd helloworld（项目名）

[root@node6 ~]# npm install(不用cnpm安装，因为cnpm安装会缺少依赖)

6.测试环境是否搭建成功

[root@node6 ~]# cnpm run dev

在浏览里输入：localhost:8080，运行起来后的效果却是如下图所示：

这个问题困扰了我很久，我尝试过关掉防火墙、打开指定端口、检查端口没有被占用都没有解决问题。查阅很多博客也没有找到相关问题，所有的博客或是文档都是到这步就成功了或者有其他的报错。后面我想到用ip打开页面会怎样？用这一思路解决了该问题。

将项目目录下config文件下的index.js中的host: 'localhost'改成host: '192.168.2.165'

再执行cnpm run dev

在浏览里输入：192.168.2.165:8080，运行起来后的效果却是如下图所示：

注：我写下这篇博客主要是为了让遇到同样问题的小伙伴能顺利解决该问题，因此前面的安装步骤就不详细介绍了。