起因: 当使用 Vite 构建项目后,需要通过局域网中的电脑或手机访问服务调试时,发现通过 IP + 端口无法访问。
简单来说就是方便自己手机本地访问而查看的 Network地址
vite-vue@0.0.0 serve /Users/UserName/Workspace/vue-vite
> vite | vite preview
vite v2.3.7 build preview server running at:
> Local: http://localhost:3000 | 5000/
> Network: use `--host` to expose
问题原因
当 局域网 中另一台设备需要访问该服务时,必须通过本机 IP + 端口 访问。
尝试访问后,发现找不到这个服务,原因是 没有 将服务暴露在网络中。
多种选择方法:
import vue from '@vitejs/plugin-vue'
/**
* https://vitejs.dev/config/
* @type {import('vite').UserConfig}
*/
export default {
plugins: [vue()],
server: { // ← ← ← ← ← ←
host: '0.0.0.0' // ← 新增内容 ←
} // ← ← ← ← ← ←
}
执行 npx vite --host 0.0.0.0
命令后,就可以通过 http://10.56.116.128:3000/
访问了。
vite v2.3.7 dev server running at:
> Local: http://localhost:3000/
> Network: http://10.56.116.128:3000/
ready in 301ms.
修改 package.json
文件中 scripts
节点下的脚本,如下
"scripts": {
"dev": "vite --host 0.0.0.0",
"build": "vite build",
"serve": "vite preview --host 0.0.0.0"
}