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

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

• • 1、问题背景
  • 2、问题分析
  • 3、解决方案

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 进行访问了
• 修改访问端口配置