Vue-cli2打包前的设置+Nginx配置Socket.io的https通信

方法1：vue 路由没有使用history模式且vue项目打包上传直接放在Nginx的html文件夹中，通过以下配置访问html文件夹下的index.html文件即为项目首页

• build文件下的untils.js文件中找到vue-style-loader增加publicPath: '../../'

• config文件下的index.js文件找到build属性，修改assetsPublicPath: '/'为assetsPublicPath: './'

• 设置开发接口代理，这里的代理正是为 Nginx 配置做准备的

• 生产环境配置文件中配置访问的服务器域名，注意：因为前端项目运行访问socket时会默认带上/socket.io/这个路由，所以初始化Socket客户端链接时的url为服务器域名即可！

• 使用npm run build命令打包项目后将（static文件夹+index.html文件）上传到/usr/local/nginx/html/目录下，再配置nginx.conf配置文件，最后重启Nginx服务即可！

方法二：vue路由使用history模式，则需要按照以下步骤来操作

• 现有一个需求，如何用Nginx配置访问不同的前端项目？答：①配置多个二级域名并且设置https访问对应项目根路径的index.html文件即可；②基于Nginx的location进行配置（以下步骤使用这种方法）。
• 在方法一的基础上，修改config文件夹下的index.js文件（注意是build内）：

• 修改src/router/index.js文件，添加内容：base: '/frontend/',

• 然后执行命令：npm run build，确保产生的index.html文件中静态资源路径都是在/frontend/文件夹下的，注意添加内容：。
  

• 将打包后的文件上传到Nginx的html目录下，注意：frontend文件夹下含static文件夹和index.html文件。

• 修改nginx.conf文件：

• 以上 nginx 配置文件仍有缺陷，若手动刷新会导致页面404，故需修改一下请求根路径下的/代码，让其重定向到特定路由：

location / {
    root   html;
    index  index.html;
    try_files $uri $uri/  /frontend/index.html;  #@qwe
  }

  #location @qwe {
  #  if ($request_uri ~* "^/frontend/.*") {
   #     rewrite ^(.*)$ https://xxxxxxx/frontend last;
    #}
    #if ($request_uri ~* "^/backend/.*") {
      #  rewrite ^(.*)$ https://xxxxxxx/backend last;
    #}
  #}
  #xxxxxxx：表示域名
  #^(.*)$表示匹配的路由
  #https://xxxxxxx/frontend：表示重定向的路由
  #last：表示本条规则匹配完成后，继续向下匹配新的location URI规则，同个代码块直接break
  #~*：用于表示URI包含正则表达式，且不区分大小写
  #$request_uri：表示除去$host剩下的部分

• 访问该项目：个人域名/frontend。
• 新增Nginx访问不同前端项目都可以采用方法二进行处理！

参考资料

• nginx URL重写（rewrite）配置
• Nginx 的基础内置变量 / Nginx 重写 url 的模式