Vue在Nginx中发布

1.将vue项目在nginx中发布。我是在  虚拟机VMware Workstation Pro 里面安装了ubuntu  linux系统下发布的。

2.其实就是将 vue的dist文件夹放到nginx下的一个位置，然后etc/nginx/nginx.conf 去配置 访问的ip端口，发布包的位置就行。

3.开始发布：

4.安装nginx;   sudo apt-get install nginx

5.到nginx根目录下新建一个文件夹，放发布包。 mkdir /path/to/nginx/conf.d/new_folder

6.配置nginx.conf 文件 ，这个是最主要的。可以复制出来写好在替换进去。

  具体写法：

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
	worker_connections 768;
	# multi_accept on;
}
http {
	include /etc/nginx/mime.types;
	default_type application/octet-stream;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;
	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;
	gzip on;
	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;

	#第一个网站
	server {
		 listen  81;
		 server_name localhost;
		 location / {
		        root /etc/nginx/html/web1/;
		        index index.html index.htm;
	             }
		}

	#第二个网站
	server {
		 listen  82;//端口
		 server_name localhost;//ip
		 location / {
		           root /etc/nginx/html/vue1/vue_test/dist/;  //发布包在哪
		           index index.html index.htm;  //默认页
	             }	 
	     }
     }

7.启动nginx   sudo service nginx start

8.输入ip+端口访问网站；

9.常用的ubuntu nginx 命令：

//安装nginx
   sudo apt-get install nginx
//新建文件夹
mkdir /path/to/nginx/conf.d/new_folder
//启动nginx
   sudo service nginx start
//重启nginx
   sudo service nginx restart
//停止nginx
   sudo service nginx stop
//检查配置错误 
sudo nginx -t
//加载配置
sudo service nginx reload
//浏览器输入127.0.0.1看到页面
//换到Nginx配置目录：
   cd /etc/nginx/
//返回上一级目录
   cd ..
//web配置信息在default中
   /etc/nginx/sites-enabled/default
//查看一个文件内容
   cat /path/to/file
//移动文件 将桌面的web1移动到html下
   sudo  mv /home/ubuntu20/Desktop/web1    /etc/nginx/html
//复制文件 将桌面的web1移动到html下 -r存在就先删除
  sudo cp -r /home/ubuntu20/Desktop/nginx.conf    /etc/nginx 
//删除dist文件夹
sudo rm -rf /etc/nginx/html/vue1/vue_test/dist
//查看文件夹里面的文件
ls

 这个时候输入ip端口应该可以看到页面，但是会存在跨域的问题。