关于 vue vite 项目中本地以及代理中开启https解决方法

最新推荐文章于 2024-05-17 11:40:43 发布
最新推荐文章于 2024-05-17 11:40:43 发布
阅读量1.1k 收藏 1
点赞数 6
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79406343/article/details/136464445
版权

在本地开启https：在项目配置文件vite.config.ts中关于server配置位置中添加 https:true, 即可。

如图所示

 在代理中开启https：同样在在项目配置文件vite.config.ts中的server中的proxy对象中加入secure: false,protocolRewrite:"https",这两行代码即可，如果不添加 protocolRewrite:"https", 会自动把target中的htpps 改 http 请求。改成后的样式应为如图所示

我使用的项目的相关依赖版本号为：

 "@vitejs/plugin-vue": "^4.2.3",

    "vite": "^4.4.5",

别星桥夜
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue在index.html中引入静态文件不生效问题及解决方法
11-28
本文针对的是Vue小白，不喜勿喷，谢谢 出现该问题的标志如下 控制台warning（Resource interpreted as Stylesheet but transferred with MIME type text/html） 出现的原因及解决办法 第一种可能出现原因就是引入...
Vue项目中跨域问题解决方案
08-27
本文给大家介绍了vue项目中跨域问题的完美解决方案，通过更改header，使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建），具体内容详情大家跟随脚本之家小编一起学习吧
vite-certificate:为vite的https开发服务提供证书
04-01
证书 为vite的https dev服务提供证书。
解决项目打包后，或用ip访问项目 http请求自动代理成了https请求，导致项目无法正常访问资源 vue3+vite
weixin_64761354的博客
03-27 392
问题本质： 在https页面中，如果调用了http资源，那么浏览器就会抛出一些错误。为了改变成这一状况，chrome(谷歌浏览器)会在http请求中加入 ‘Upgrade-Insecure-Requests: 1’ ，服务器收到请求后会返回 “Content-Security-Policy: upgrade-insecure-requests” 头，告诉浏览器，可以把所属本站的所有 http 连接升级为 https 连接。1. 检查项目中index.html中是否有。
Vite开启https
czw15913934496的博客
12-26 1043
（1）新建文件夹来存放证书（这步可不做，但是生成的证书会在c盘中）（2）设置Chocolatey安装位置。（1）打开PowerShell。（3）安装Chocolatey。4、Vite配置https证书。1、安装Chocolatey。3、生成https证书。（2）执行命令生成证书。2、安装mkcert。
Vite 开启本地 https 服务
qq_40868156的博客
07-21 4385
vite, 开启本地 https 服务，启用 https 协议，运行项目
vite/Vuecli配置proxy代理解决跨域
Suk__的博客
04-20 6964
上代码: import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { resolve } from 'path'; // https://vitejs.dev/config/ export default defineConfig({ server: { port: 9090, strictPort: true, // 严格端口 true:如果端口已被使用，则直接退出，而不会再
vue3+vite代理配置
yy869949908的博客
09-20 1559
前端项目上线前，运行在本地，无法跨域请求到服务器接口。
vue cli构建的项目中请求代理与项目打包问题
11-29
以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
在vue项目中引入highcharts图表的方法
10-17
今天小编就为大家分享一篇关于在vue项目中引入highcharts图表的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue项目中使用vue-i18n报错的解决方法
12-09
然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到...
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
最新发布
weixin_58540586的博客
05-17 1185
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
Vue3选项式和组合式生命周期说明
weixin_44072254的博客
05-16 502
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1108
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 350
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1040
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
vue3中vite创建项目
07-28
在Vue 3中使用Vite来创建项目十分简单。下面是一些步骤： 1. 首先，确保你的环境具备Node.js和npm的安装。 2. 打开你的命令行工具，进入你想要创建项目的目录。 3. 运行以下命令来全局安装Vite： ``` npm install -g create-vite ``` 4. 然后，运行以下命令来创建一个Vue 3项目： ``` create-vite <项目名> --template vue ``` 这里的 `<项目名>` 是你想要创建的项目的名称，可以自己定义。 5. 创建完成后，进入项目目录： ``` cd <项目名> ``` 6. 最后，运行以下命令来安装项目的依赖并启动开发服务器： ``` npm install npm run dev ``` 现在，你就成功地使用Vite创建了一个Vue 3项目。你可以在浏览器中访问 `http://localhost:3000` 来查看你的应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值