手机端访问本地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), 即可在手机端浏览到项目主页面。

相关推荐
榴莲omega4 分钟前
正则表达式入门与实战指南
javascript·正则表达式·js八股
白开水都有人用4 分钟前
点击数据行选中复选框-抽离公共方法
java·前端·html
weixin1997010801617 分钟前
《电子元器件商品详情页前端性能优化实战》
前端·性能优化
Southern Wind19 分钟前
Vue 3 + Naive UI 企业级后台管理系统完整解析
前端·vue.js·ui·typescript
清汤饺子20 分钟前
AI 编程新范式:Spec First 的四件套,让 AI 不再是"热情但跑偏的实习生"
前端·javascript·后端
weixin1997010801620 分钟前
《建材网商品详情页前端性能优化实战》
前端·性能优化
坐吃山猪20 分钟前
TypeScript编程04-函数
javascript·ubuntu·typescript
LXXgalaxy22 分钟前
小程序文件上传怎么做?一套可复用的 UniApp 上传+预览 Demo
javascript·vue.js·uni-app
程序员 沐阳24 分钟前
从缓慢等待到瞬间响应:Vite 如何重塑前端开发体验
前端·前端框架
wangjinsheng59326 分钟前
Vue3 + Element Plus 前端 AI 编码模板
前端·vue.js·ai·elementui·ai编程