vue项目部署到nginx上

vue项目部署到nginx上

1. 将vue项目打包

npm run build

打包成功后会在项目的根目录下面生成一个dist文件夹，所有的资源文件都会放在这个文件夹下面。
2. 下载并安装nginx，选择你需要的版本进行下载
nginx下载网址：http://nginx.org/en/download.html
由于我的操作系统是Windows版本，所以我下载的是windows版本的，下载后解压后的文件目录如下图所示：

3. 启动nginx：cmd进入该文件目录，使用start nginx即可启动nginx服务

start nginx   #启动nginx服务
nginx -s stop #快速停止nginx服务，不会保存运行状态
nginx -s quit #停止nginx服务，同时保存运行状态
nginx -s reload #重启nginx服务
nginx -v #查看nginx的版本

4. 检查nginx是否启动成功
   在页面输入localhost:80出现如下界面（没有修改nginx.conf的配置文件）
   
   则说明你的nginx安装好了
5. 将打包好的dist文件下的内容放到html文件夹下面，再修改conf/nginx.conf文件

 server {
	        listen       80;
	        server_name  localhost;
	        location / {
	            root   html;#项目根路径
	            index  index.html index.htm;
				#解决刷新404问题
				try_files $uri $uri/ /index.html;
	        }
			#跨域的配置，可以写之前在vue的vue.config.js中的跨域配置
			location /api {
	            proxy_pass   http://localhost:8088/;
	        }
        }

特别注意，跨域的配置路径后面的斜杠不能丢，否则会报404错误 http://localhost:8088/
7.