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

AuraVic

已于 2023-11-27 14:41:31 修改

阅读量1k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-11-27 14:41:09 首次发布

本文链接：https://blog.csdn.net/aruavic/article/details/134641167

版权

前言： 小编今天产品上有一个需求，就是多个相同二级域名下的系统的要共享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 进行配置。