Ubuntu系统下配置Vue环境

 

 

 

 

系统：Ubuntu 18.04

工具：XShell 6 plus(http://www.xshellcn.com/xiazai.html)

1.安装nodejs

• 从nodejs官网(http://nodejs.cn/download/)下载安装包
• 

2.用Xftp 6连接到服务器，新建文件夹 /home/myVue/env

3.打开/home/myVue/env文件夹，将下载的node-v10.15.3-linux-x64.tar上传到云服务器

4.解压缩：

在Xshell 6 中连接云服务器，并切换到/home/muVue/env目录，执行下面的命令（版本写自己下载的）

tar -xvf node-v10.15.3-linux-x64.tar.xz

解压完成后：

5.建立node 和 npm 的软链接

sudo ln -s /home/myVue/env/node-v10.15.3-linux-x64/bin/node /usr/local/bin/node
sudo ln -s /home/myVue/env/node-v10.15.3-linux-x64/bin/npm /usr/local/bin/npm

使用node -v 和npm -v 来查看是否安装成功，安装成功会显示版本信息

     这样表示是安装成功了

6.安装cnpm

安装cnpm是因为使用npm install安装包时速度很慢，所以建议安装cnpm后使用cnpm install来安装包。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后同样要建软链接，否则在使用cnpm时会报No command 'cnpm' found的错误。

sudo ln -s /home/myVue/env/node-v10.15.3-linux-x64/bin/cnpm /usr/bin/cnpm

7.安装vue-cli

cnpm install -g vue-cli

安装完成后同样要建立软链接，否则会报No command 'vue' found的错误。

sudo ln -s /home/myVue/env/node-v10.15.3-linux-x64/bin/vue /usr/bin/vue

如果不想每次全局安装后都去建立软链接，可以在安装完npm或cnpm后，
使用以下命令将安装路径指向/usr/local，
这样之后使用npm或cnpm安装包之后就可以直接使用命令。 
npm config set prefix /usr/local 
cnpm config set prefix /usr/local 
设置完之后可以使用下列命令进行查看。 
npm root -g 
cnpm root -g

8.使用vue-cli创建项目

vue init webpack my_project

测试创建项目过程随便填写即可，遇到无选项的就按回车，遇到Y/n就输入Y。

下载完成后执行下列命令可运行项目。

cd /home/myVue/env/my_project
cnpm install
cnpm run dev

现在，项目还不能在外网访问，需要做其他配置。

9.解决外网不能访问的问题 

修改config/index.js 的 host 属性为 ‘0.0.0.0’

cd config/
vim index.js

修改 build/webpack.dev.conf.js 的 devServer 配置

增加 disableHostCheck : true

cd build/
vim webpack.dev.conf.js

然后启动，外网就可以访问了！！！

cd /home/myVue/env/my_project
cnpm install
cnpm run dev

现在在外网就可以访问了。

 

但是现在服务启动后，在前台运行，很不方便，下面来配置后台运行。

10.配置后台启动

命令行输入：

which nohup

复制这个地址。一般是   /usr/bin/nohup

命令行执行下面命令

cd 

回到根目录

vim .bash_profile

创建并编辑配置文件：

PATH=$PATH:$HOME/bin:/usr/bin/nohup

执行命令：

source ~/.bash_profile

cd回到你的项目目录。执行指令：

nohup npm run dev >/dev/null 2>&1 &

然后就可以后台启动了。

 

 

 

至此，配置全部完成。