Vue Cli搭建域名网站及常见问题
Vue Cli搭建域名网站
搭建域名网站
以Ubuntu 19.04系统服务器为例，首先连接远程主机。
一、安装Node.js和NPM
安装Node.js和NPM并查看版本确认是否安装成功
sudo apt-get install nodejs
node -v
sudo apt-get install npm
npm -v
二、搭建FTP上传项目文件
1、安装vsftpd
安装vsftpd
sudo apt-get install vsftpd -y
启动vsftpd
sudo systemctl start vsftpd
sudo systemctl enable vsftpd
2、添加FTP用户并配置vsftpd
添加用户，以用户名为ftpuser为例（注意：本例全程使用ftpuser作为新增用户名，根据自身情况将ftpuser替换为自定义用户名）：
sudo adduser ftpuser
运行命令后根据提示设置密码，以及新增用户的信息（可选）。密码记录下来，在FTP登录时会用到。
添加完用户以后，新建FTP文件夹并给用户设置相应权限。
sudo mkdir /home/ftpuser/ftp
sudo chown nobody:nogroup /home/ftpuser/ftp
sudo chmod a-w /home/ftpuser/ftp
在FTP文件夹下新增站点上传的目录
sudo mkdir /home/ftpuser/ftp/vuesite
sudo chown ftpuser:ftpuser /home/ftpuser/ftp/vuesite
备份一份文件，开始配置vsftpd配置文件
sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.bak
使用vim配置vsftpd.conf文件
sudo vim /etc/vsftpd.conf
编辑模式下，在文件中添加以下内容
listen=NO
listen_ipv6=YES
anonymous_enable=NO
local_enable=YES
write_enable=YES
local_umask=022
dirmessage_enable=YES
use_localtime=YES
xferlog_enable=YES
connect_from_port_20=YES
chroot_local_user=YES
secure_chroot_dir=/var/run/vsftpd/empty
pam_service_name=vsftpd
pasv_enable=Yes
pasv_min_port=10000
pasv_max_port=11000
user_sub_token=$USER
local_root=/home/$USER/ftp
userlist_enable=YES
userlist_file=/etc/vsftpd.userlist
userlist_deny=NO
修改完成后保存。
在配置中我们设置为在/etc/vsftpd.userlist文件中定义用户列表，需要在该文件中加入之前添加的用户名，运行以下命令
sudo nano /etc/vsftpd.userlist
编辑模式下，添加之前新增的用户名
ftpuser
添加完成后保存退出
重新启动FTP服务
sudo systemctl restart vsftpd
3、使用FileZilla连接远程
打开FileZilla软件，File>Site Manager>New Site
在General选项卡的Host:中，输入服务器IP地址
User:和Password:中输入用户名密码
点击Connect开始连接。连接成功后将本地文件上传至服务器
三、 使用PM2启动项目
如果Vue项目使用用npm run serve运行时间过长或断开连接时进程会被意外停止，要保持npm run serve连接。我们可以使用PM2来解决：
安装pm2
sudo npm install pm2@latest -g
常用命令(以项目名为vuesite为例)
| 命令行输入 | 功能 | 备注 |
|---|---|---|
pm2 start npm --name vuesite -- run serve |
运行Vue项目 | 使用时需cd到项目的根目录 |
pm2 list |
查看PM2运行列表 | |
pm2 stop vuesite |
停止进程 |
常见问题
一、Vue Cli不使用反向代理配置域名
通过npm run serve命令执行Vue项目只能通过IP地址来访问，即使域名服务中设置DNS依然访问不到。有以下两种解决办法：
1、根目录下新建并配置vue.config.js文件
module.exports = {
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',//改为域名
port: 8080,//改为端口80
https: false,
hotOnly: false,
proxy: null, // string | Object
before: app => {}
}
}
2、修改项目根目录下package.json文件
//第5行
"scripts": {
"serve": "vue-cli-service serve --host 你的域名 --port 80",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
以上为Vue Cli不使用反向代理配置域名的解决办法，虽然实现了效果。运行run npm serve就可以在自己域名看到页面，但是从安全性以及拓展性考虑，建议以反向代理实现较为合适，在此不做展开。
二、vsftpd上传文件进行覆写时提示open for write: permission denied
笔者使用FileZilla作为FTP文件管理工具。
按照一般解决方式:
1、在liunx命令行中运行
sudo chown 777 需要提权的目录
可以将权限提高
2、重启ftp服务器
sudo systemctl restart vsftpd.service
以上步骤做完之后，如果依然报错。这时需要第三步：
3、在FileZilla中设置权限。
打开右击服务器中需要上传操作的文件。选择文件属性(File Attributes)。在弹窗中勾选权限，或者直接输入777确认。再次上传文件，可以看到久违的File transfer successful。
三、关闭npm run serve进程
在连接Liunx服务器中可能由于服务器不稳定而断开，之前的实例来不及关闭就结束了。这个时候可以使用进程管理命令来关闭之前运行的进程。
1、查看进程列表
找到COMMAND中包含vue-cli-service serve的进程。记录对应PID。
ps aux
2、中止进程运行
如PID为501，则运行kill 501
kill 进程的PID
