手把手教你在ubuntu上使用nginx部署vue项目

1. 首先在本地将vue项目打包，在vue目录下运行

yarn build

如果遇到 delete "CR"的问题，运行：

npm run lint --fix

2. 连接云服务器，并安装所有依赖。

sudo apt -y update
sudo apt -y upgrade
sudo apt -y install gcc
sudo apt -y install g++
sudo apt -y install build-essential
sudo apt -y install libssl-dev
sudo apt -y install curl
sudo apt -y install libcurl4-gnutls-dev
sudo apt -y install libjpeg-dev
sudo apt -y install libpng-dev
sudo apt -y install libmcrypt-dev
sudo apt -y install libreadline6-dev
sudo apt -y install autoconf
sudo apt -y install libpcre3 libpcre3-dev

3. 安装nginx

wget http://nginx.org/download/nginx-1.13.6.tar.gz
tar -zvxf nginx-1.13.6.tar.gz

4. 进入nginx目录

cd nginx-1.13.6
sudo ./configure

注意这里的结果会打印很大一长串内容。

5. 编译安装nginx

make
make install

6. 运行 nginx官网页面

cd /usr/local/nginx/sbin
sudo ./nginx

7. 访问终端页面
   
   注意现在默认的端口是80端口，有些云服务器默认80端口是不开的，这个时候我们就需要配置别的端口。

8. 配置端口和项目

cd /usr/local/nginx/conf
vim nginx.conf

注意这里的listen后面的内容为端口，我这里配置为9204；

而location里面root表示项目的位置。

我们把最开始打包的dist文件放到创建好的vueproject文件夹后，就可以将路径改为如图所示。

9. 重新部署项目

sudo /usr/local/nginx/sbin/nginx -s reload

10. 再次访问便可以看到你的页面了！