如何在本地启动vue项目使用域名访问

前言： 小编今天产品上有一个需求，就是多个相同二级域名下的系统的要共享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知识，就能快速启用安全的本地开发服务器。

技术分析

1. 自动化生成证书： vite-plugin-mkcert 内部调用了 mkcert 工具，在首次启动Vite开发服务器时，会自动生成一对本地可信的证书文件。这些证书可以在你的电脑上全局生效，不仅限于单一项目。

2. 零配置集成： 只需要简单地在你的Vite配置文件(vite.config.js) 中引入并启用该插件，即可实现自动配置。极大地减少了手动操作和出错的可能性。

// vite.config.js
import mkCert from 'vite-plugin-mkcert';

export default {
  plugins: [
  	mkCert()
  ]
};

3. 平滑过渡： 如果你的项目已经使用其他方式配置了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,
},

4.3、配置好本地 host 文件的域名与项目启动好，启动项目即可使用 https 的配置访问本地服务。