使用腾讯cloud studio运行VUE项目

北门放羊

前面有讲过如何在cloud studio上使用nodejs，这里就不再赘述了，安装vuejs也很简单，我们直接用npm安装就行来了，不过建议使用淘宝的cnpm，这样速度比较快点儿。
有一点儿需要提醒的，建议操作都带上sudo，防止无权限的问题
安装cnpm比较简单

sudo npm install cnpm -g

装好cnpm记得也要建立一个软连接到/usr/local/bin目录下。
然后安装vuejs啊和安装webpack与在其他地方无异，不赘述，主要是想讲下怎么把这个demo跑起来。
一顿操作

cnpm install --global vue-cli
vue init webpack my-project

然后是一通配置 ，按提示默认即可，我们的目的是跑起来就行，所以全部默认。
再然后

cd my-project
sudo cnpm install
sudo cnpm run dev

这时候我们会看到启动成功了，提示我们的演示项目运行在http://localhost:8080
然后我们去访问链接处新建一个0.0.0.0：8080的访问链接，可是一点击访问，却报502.
查了下原因，需要改一处配置，修改项目目录下config/index.js中 module.exports = { host: ‘0.0.0.0’ }，我们直接找到这个文件，使用vim编辑即可，记得前面加上sudo，不然没法保存，原先的host配置是localhost，我们把localhost改为0.0.0.0即可。
重新启动demo，再次创建访问链接，可是访问依然有问题，这次没报502了，但是页面提示“Invalid Host header”，原因网上大把的解释，我们说下解决办法。
在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可转发成功

devServer: {
  disableHostCheck: true,
}
//记得这个英文逗号别漏了，不然会报错的

文件位置在项目的build目录下
如果vue-cli版本3.0的情况下修改vue.config.js的配置

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

由于我的vue是2.9版本的，所以使用第一种修改方法，修改完了以后，重新启动demo，然后创建访问链接，点击访问链接就可以打开demo啦
vuedemo