手机端访问本地vue项目

首先已经正常初始化构建了vite + vue 项目
1.电脑和手机共用同一网络
2.查看电脑IP

命令行输入ipconfig ,找到IPv4 地址就是你的本机IP地址;注意不是在浏览器直接输入IP显示的那个外网IP地址

3、修改项目的vite.config.js 文件,在defineConfig 添加 server 项如下。host 是你本地ip 地址,port 端口号可以随意写一个还没被占用的端口。

devServer添加配置: host: "0.0.0.0", disableHostCheck: true

复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    open:true,//自动浏览
    port:8088,//端口号
    host:'192.168.0.5'
  },
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src'),
    }
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  devServer: {
    host: '0.0.0.0',
    https: false,
    open: true,
    disableHostCheck:true,
    
  }
})

4、然后在电脑本地项目 npm run dev 启动项目,接着在手机浏览器输入服务地址*(Ip地址+端口:192.168.0.5:8088), 即可在手机端浏览到项目主页面。

相关推荐
JarvanMo1 分钟前
适用于 iOS 开发者的 Flutter 3.38:Xcode 与 Swift 集成新技巧
前端
北极糊的狐14 分钟前
Vue 中 vue-awesome-swiper的使用笔记(适配 Vue2/Vue3)
前端·javascript·vue.js
anyup17 分钟前
🔥100+ 天,已全面支持鸿蒙!uView Pro 近期更新盘点及未来计划
前端·uni-app·harmonyos
m0_6265352025 分钟前
代码分析 长音频分割为短音频
javascript·python·音视频
2***574229 分钟前
前端数据可视化应用
前端·信息可视化
xiaoxue..30 分钟前
栈的全面解析:ADT、实现与应用
javascript·数据结构·面试
DevUI团队36 分钟前
Angular开发者必看:深度解析单元测试核心技巧与最佳实践
前端·javascript·angular.js
Mintopia37 分钟前
🌐 动态网络环境下的 WebAIGC 断点续传与容错技术
前端·人工智能·aigc
答案answer1 小时前
一些经典的3D编辑器开源项目
前端·开源·three.js
亿元程序员1 小时前
Creator都快4.0了,怎么能没有这样的功能?
前端