前言

开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。同时因为vue为了避免跨域，在开发环境时，要配置dev-server-proxy，通过代理的方式进行api请求，也需要进行代理转发的配置

步骤

1. 打包

vue项目在开发完成后，就要进行生产环境的部署，假设已经配置好webpack相关的配置，通过以下命令进行生产代码的打包

npm run build:prod

以上命令可以打包生产环境的代码，会执行vue-cli-service 的 build 命令

输出结果在同级目录下的 dist中

将 dist下的文件，拷贝至 nginx的安装目录下的html目录，这里是nginx 配置静态页面的目录

2. nginx 部署

将第一步中获取的文件复制到nginx 安装目录下的 html 目录中，同时进行nginx 配置文件的调整

• vue 项目目录的转发
• vue 后端api 地址的转发, 因为axios 配置的是相对路径的关系，要进行转发

server {
  listen       8001 default_server; # 监听的端口
  listen       [::]:8001 default_server;
  server_name  _;
  root         html; # 要目录
  server_tokens off;
  ssl_protocols TLSv1.2;
  # Load configuration files for the default server block.
  #include /etc/nginx/default.d/*.conf;

  # 默认都是走vue的index.html 
  location / {
    try_files $uri $uri/ /index.html;	    
  }
  # 因为在项目中配置的默认请求的后端地址会默认带上 /prod-api 作为前缀
  # 故这里转发/prod-api 开头的地址到后端的服务 8080端口
  location /prod-api/ {
    proxy_pass http://localhost:8080/;
  }

  error_page 404 /404.html;
  location = /40x.html {
  }

  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
  }
}