手把手教你在ubuntu上使用nginx部署vue项目
程序员文章站
2024-02-16 17:23:04
...
- 首先在本地将vue项目打包,在vue目录下运行
yarn build
如果遇到 delete "CR"的问题,运行:
npm run lint --fix
- 连接云服务器,并安装所有依赖。
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
- 安装nginx
wget http://nginx.org/download/nginx-1.13.6.tar.gz
tar -zvxf nginx-1.13.6.tar.gz
- 进入nginx目录
cd nginx-1.13.6
sudo ./configure
注意这里的结果会打印很大一长串内容。
- 编译安装nginx
make
make install
- 运行 nginx官网页面
cd /usr/local/nginx/sbin
sudo ./nginx
-
访问终端页面
注意现在默认的端口是80端口,有些云服务器默认80端口是不开的,这个时候我们就需要配置别的端口。 -
配置端口和项目
cd /usr/local/nginx/conf
vim nginx.conf
注意这里的listen后面的内容为端口,我这里配置为9204;
而location里面root表示项目的位置。
我们把最开始打包的dist文件放到创建好的vueproject文件夹后,就可以将路径改为如图所示。
- 重新部署项目
sudo /usr/local/nginx/sbin/nginx -s reload
- 再次访问便可以看到你的页面了!