vue开发环境调试前端http如何改成https访问

vue.config.js

module.exports = {
  ...,
  devServer: {
    https: true
  }
}
若依前端项目访问CentOS系统可以通过以下两种方式实现: ### 调试时方式(正式部署不推荐) 先进入若依前端项目目录,然后运行对应的开发命令: ```bash cd ruoyi-ui/ npm run dev ``` 这种方式主要用于调试,能快速启动项目进行开发测试,但不适合正式环境部署[^1]。 ### 正式部署方式 使用打包生成的`dist`目录配置Nginx,可提升网页访问速度。具体步骤如下: 1. **修改Nginx配置文件**: ```bash vim /usr/local/nginx/conf/nginx.conf ``` 在配置文件中进行如下修改: ```plaintext # 第一行放开,改成如下 user root; # 其他位置修改如下 server { listen 80; # 80为http默认端口,可以直接访问ip直达项目 server_name ?.?.?.?; # ?处填写实际的ip地址或域名(ECS的话填公网ip) location / { root /?/RuoYi-Vue/ruoyi-ui/dist; # ?处填写实际的项目打包路径 index index.html; # 在root对应目录下找index对应文件 try_files $uri $uri/ /index.html; # 重要,不配置此项,直接访问页面路径会让nginx误认为去dist目录找静态资源,而非去找打包好的页面路径 } location /prod-api/ { # 配置后端路由,prod-api是代码定的 proxy_set_header Host $proxy_host; # 固定写法 proxy_set_header X-Real-IP $remote_addr; # 固定写法 proxy_set_header REMOTE-HOST $remote_addr; # 固定写法 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 固定写法 proxy_pass http://?.?.?.?:8080/; # ?处填写后台代理地址,8080为后端代码指定的端口 } } ``` 2. **检查Nginx语法问题**: ```bash /usr/local/nginx/sbin/nginx -t ``` 若提示`successful`,则表示语法正确,可进行下一步;否则,需排查具体问题。 3. **重置Nginx配置使其生效**: ```bash /usr/local/nginx/sbin/nginx -s reload ``` 完成上述配置后,就可以通过配置的IP地址或域名访问若依前端项目[^1]。
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值