vue-cli项目打包+部署到nginx

1，vue-cli打包。

1. 修改vue.config.js

publicPath: '/',

2. 打包，打包后会生成dist文件夹，dist文件夹下的文件就是需要部署的文件，在本地无法访问。

打包正式环境
npm run build:prod

打包预发布环境
npm run build:stage

2，部署到服务器（我使用的服务器使Ubuntu）

1. 安装Nginx

sudo apt-get install nginx
安装好Nginx目录为etc/nginx

4. etc/nginx/conf.d中配置nginx
   单独创建一个文件

 server {
	listen 80;
	server_name www.****.cn;//访问地址
	
	root /www/wwwroot/quickCn;//静态文件路径，指向项目文件路径，将dist下的文件放在此处
	
	location ~*(^\/(api)) {//api访问代理配置
    proxy_pass http://api.****.cn;//服务端请求代理路径
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;
	}

	location ~.*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) {//静态文件访问路径设置
    root /www/wwwroot/quickCn;
	}
  location / {//处理刷新页面空白
  try_files $uri $uri/ /index.html;
  }
}

5. 重启Nginx即可；

• 若Nginx文件地址始终指向默认文件，可修改Nginx默认文件路径
  （/etc/nginx/sites-enabled/default）

修改root指向路径
root /www/wwwroot