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

时间:2021-7-4 作者:qvyue

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

  • build文件下的untils.js文件中找到vue-style-loader增加publicPath: '../../'
Vue-cli2打包前的设置+Nginx配置Socket.io的https通信
  • config文件下的index.js文件找到build属性,修改assetsPublicPath: '/'assetsPublicPath: './'
Vue-cli2打包前的设置+Nginx配置Socket.io的https通信
  • 设置开发接口代理,这里的代理正是为 Nginx 配置做准备的
Vue-cli2打包前的设置+Nginx配置Socket.io的https通信
  • 生产环境配置文件中配置访问的服务器域名,注意:因为前端项目运行访问socket时会默认带上/socket.io/这个路由,所以初始化Socket客户端链接时的url为服务器域名即可!
Vue-cli2打包前的设置+Nginx配置Socket.io的https通信
  • 使用npm run build命令打包项目后将(static文件夹+index.html文件)上传到/usr/local/nginx/html/目录下,再配置nginx.conf配置文件,最后重启Nginx服务即可!
Vue-cli2打包前的设置+Nginx配置Socket.io的https通信

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

  • 现有一个需求,如何用Nginx配置访问不同的前端项目?答:①配置多个二级域名并且设置https访问对应项目根路径的index.html文件即可;②基于Nginx的location进行配置(以下步骤使用这种方法)。
  • 在方法一的基础上,修改config文件夹下的index.js文件(注意是build内):
Vue-cli2打包前的设置+Nginx配置Socket.io的https通信
  • 修改src/router/index.js文件,添加内容:base: '/frontend/',
Vue-cli2打包前的设置+Nginx配置Socket.io的https通信
  • 然后执行命令:npm run build,确保产生的index.html文件中静态资源路径都是在/frontend/文件夹下的,注意添加内容:

    Vue-cli2打包前的设置+Nginx配置Socket.io的https通信
  • 将打包后的文件上传到Nginx的html目录下,注意:frontend文件夹下含static文件夹和index.html文件。

Vue-cli2打包前的设置+Nginx配置Socket.io的https通信
  • 修改nginx.conf文件:
Vue-cli2打包前的设置+Nginx配置Socket.io的https通信
  • 访问该项目:个人域名/frontend

  • 新增Nginx访问不同前端项目都可以采用方法二进行处理!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。