TechBlog
首页分类标签搜索关于

© 2025 TechBlog. All rights reserved.

Vue3创建项目,只能localhost访问问题处理

11/22/2025
未分类#前端#Vue#Javascript

Vue3创建项目,只能localhost访问问题处理

1、问题背景

  • Vue3创建的项目没有和Vue2项目相同的配置文件vue.config.js去修改相关的访问host配置信息,导致项目启动后只能使用localhost进行访问。
  • 网上查询相关问题,处理方式基本都是在项目根目录手动新增vue.config.js文件,同时在文件中写入相关配置信息,但是重启项目后并没解决问题

2、问题分析

  • Vue3创建的项目相比Vue2少了vue.config.js文件,且构建方式不同。手动添加vue.config.js不生效的原因是Vue2基于Webpack构建,而Vue3基于Vite构建。
  • 在这里插入图片描述

3、解决方案

  • 处理只能使用localhost进行访问的问题
    找到package.json,修改scripts属性中的dev属性:
    在这里插入图片描述
  • 完整scripts属性:
{
    "dev": "vite --force --host",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint": "eslint . --fix --cache",
    "format": "prettier --write src/"
  }		

  • 修改完成后重新启动服务就可以用 127.0.0.1 进行访问了
  • 修改访问端口配置
    在这里插入图片描述