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