首先，手机和电脑要在同一个局域网内。

查看本地局域网的ip地址

mac下，wifi设置-详细信息-复制IP地址

修改vite.config.js

因为默认情况下，vite只允许本地访问即127.0.0.1，所以需要修改配置文件，允许外部所有设备访问，即0。0.0.0。

export default defineConfig({
  。。。,
  server: {
    host: '0.0.0.0', // 允许外部设备（如手机）访问
    port: 5173, // 你使用的端口
    open: true // 启动时自动打开浏览器
  }
})

打开手机浏览器

输入http://你的ip地址:5173，即可查看。

安装依赖，让系统可以辨认.vue文件

npm install @vue/runtime-core --save-dev

配置shims-vue.d.ts文件

在项目的 src 目录下，创建或检查是否有一个 shims-vue.d.ts 文件。确保它包含以下内容：

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

这个文件告诉 TypeScript 如何处理 .vue 文件。

构建应用

npm run build

这会生成一个 dist 目录，里面包含了所有的静态资源，可以直接部署到服务器上。

本地预览

npm install -g serve
serve -s dist

这样，就可以通过 http://localhost:3000/ 访问你的应用了。

上传dist目录到服务器

例如：

scp -r your-path/dist root@IP:/var/www/dist

将本地dist目录上传到服务器的/var/www/dist目录下。

踩坑注意：请勿上传到root目录下，这样会导致nginx因权限不够无法访问到dist目录。

配置nginx

找到nginx的配置文件

sudo nginx -t

打开配置文件

vim /etc/nginx/nginx.conf

在http模块中添加以下配置

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/dist;
    index index.html;
}

重启nginx

sudo systemctl restart nginx

打开浏览器，输入你的域名，就可以看到你的vue应用了。

参考

https://cli.vuejs.org/zh/guide/deployment.html#%E4%BD%BF%E7%94%A8-history-pushstate-%E7%9A%84%E8%B7%AF%E7%94%B1

https://blog.csdn.net/weixin_49577940/article/details/118181242