前言: 小编今天产品上有一个需求,就是多个相同二级域名下的系统的要共享cookie,通过cookie来进行免密登录。那这个需求在本地我们如何调试呢?这就需要依靠本地启动一个服务通过域名来访问。
例如:
test01.csdntest.com、test02.csdntest.com、test03.csdntest.com这三个系统中,cookie存于 csdntest.com域名下,这三个网站可以共同获取到。js使用js-cookie这个包即可获取cookie。
一、vue的devServe配置参数
devServer 是一个用于配置开发服务器的选项对象。它可以用来配置服务器的各种选项,例如代理,端口号,HTTPS 等。当然它的配置在打包后的环境下是不生效的。以下是一些常用的 devServer 参数和设置:
- port:指定开发服务器的端口号,默认为 8080。
- host:指定开发服务器的主机名,默认为 localhost。
- https:开启 HTTPS,可以传入一个 Object 类型的参数,用于配置 HTTPS 选项。
- open:自动打开浏览器,默认为 false。可以传入一个 String 类型的参数,用于指定浏览器的名称。
- proxy:用于配置代理。可以传入一个 Object 类型的参数,用于配置代理选项。
- hot:启用热重载,默认为 true。
- compress:启用 gzip 压缩。
- historyApiFallback:启用 HTML5 历史模式路由。当浏览器访问的路径不存在时,将返回 index.html 文件,而不是 404 页面。
- publicPath:指定资源的公共路径,可以是一个相对路径或绝对路径。
- quiet:禁用所有输出信息。
- clientLogLevel:指定在浏览器控制台中显示的日志级别,默认为 info。
- overlay:在浏览器中显示编译错误。
- watchOptions:用于配置监视文件的选项。
- contentBase:指定静态文件的目录,默认为项目根目录。
- before 和 after:在服务器启动之前或之后执行自定义代码。
二、配置vue.config.js 文件
在你的vue.config.js文件中配置以下代码,然后执行命令npm run dev,就可以使用配置的host地址来访问本地项目啦!
module.exports = {
devServer: {
disableHostCheck: true,// ⚠️新版已废弃,这个是给webpack-dev-server开启可IP和域名访问权限
allowedHosts: 'all',// ⚠️新版才有
host: "test01.csdntest.com",
port: 80,//隐藏端口号
open: true,
overlay: {
warnings: false,
errors: true
}
},
}
三、配置host文件
如果你通过你配置的host地址打开的网页一直转圈圈,或者是互联网上的网站,并不是你自己的本地项目,那么你需要在你的电脑的host文件中配置一下域名代理。因为浏览器可能把你的网址当作一个正常的互联网地址去解析了,当然他的解析顺序就是计算机本地DNS服务器查看是否有对应的ip地址(host文件),然后就是互联网上的DNS服务器去解析了。找不到的话就会一直转圈,所以我们需要将我们配置的 test01.csdntest.com 来和当前计算机的ip地址 120.0.0.1 进行配置。
mac版本修改本地host地址为例:
【访达】=>【前往】=>【前往文件夹】=> 输入 /private/etc/hosts,将改目录下的hosts文件复制一份到桌面,在最后一行添加
120.0.0.1 test01.csdntest.com
保存文件后,将改文件拖入 /private/etc/ 目录下,替换当前hosts文件即可。
host文件通常位于操作系统的系统目录中,具体路径如下:
-
Windows系统:C:\Windows\System32\Drivers\etc\hosts
-
Mac系统:/private/etc/hosts
-
Linux系统:/etc/hosts
通过以上的修改后,就可以使用域名来访问当前启动的vue项目啦!
四、如何使用HTTPS的正式域名来调试本地代码呢?
需求来源:小编因为需要开发一个新的功能,需要调用某第三方库的api,这个第三方库是对请求的域名做了权限校验,所以本地的域名是无法正确调用到第三方库的api的,所以就需要使用正式环境的域名来访问本地项目的 127.0.0.1 的项目。
4.1、需要引入的包 vite-plugin-mkcert
在前端开发中,我们经常需要处理HTTPS证书问题,尤其是在本地开发环境中模拟真实线上环境时。现在,有一款名为vite-plugin-mkcert的Vite插件可以帮你轻松解决这个问题。这款工具由liuweiGL开源,其目标是简化开发过程中的SSL证书生成和配置,让你的本地开发更加顺利。
包简介
是一个基于Vite的插件,用于自动生成信任的本地HTTPS证书,并自动配置到你的项目中。它利用了mkcert工具的强大功能,使得开发者无需深入了解SSL/TLS知识,就能快速启用安全的本地开发服务器。
技术分析
-
自动化生成证书: vite-plugin-mkcert 内部调用了 mkcert 工具,在首次启动Vite开发服务器时,会自动生成一对本地可信的证书文件。这些证书可以在你的电脑上全局生效,不仅限于单一项目。
-
零配置集成: 只需要简单地在你的Vite配置文件(vite.config.js) 中引入并启用该插件,即可实现自动配置。极大地减少了手动操作和出错的可能性。
// vite.config.js
import mkCert from 'vite-plugin-mkcert';
export default {
plugins: [
mkCert()
]
};
- 平滑过渡: 如果你的项目已经使用其他方式配置了HTTPS,vite-plugin-mkcert 可以无缝切换,不会影响现有设置。只有当你的项目没有明确配置HTTPS时,它才会介入。
应用场景
本地开发: 快速搭建一个安全的本地开发环境,对于需要处理Websocket、Service Worker或者PWA的项目尤其有用。
团队协作: 共享相同的本地证书,确保所有人在开发过程中看到的是相同的安全提示,避免因证书问题产生的误解。
教学演示: 在教学或培训过程中,提供一键式的HTTPS环境,让学习者更专注于代码本身而不是环境配置。
特点
简便快捷: 几行代码即可完成配置,自动化处理大部分工作。
安全可靠: 使用mkcert生成的证书在本地完全可信,避免了浏览器警告。
跨平台兼容: 支持Windows、macOS和Linux等主流操作系统。
透明集成: 不改变原有开发流程,无缝融入Vite生态系统。
结语
vite-plugin-mkcert是一个实用的工具,特别适合那些需要在本地进行HTTPS开发的项目。它的出现降低了前端开发者处理证书问题的门槛,提升了开发效率。不妨尝试一下,看看它是否能为你的开发工作带来便利吧!
4.2、修改 vite.config.js 中本地启动配置
// vite.config.js
server: {
https: true,
port: 443,
host: "0.0.0.0",
open: true,
},