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