解决Network: use --host to expose,展示代码。
发现项目运行时只能在本地查看:
如何将其放到网络上呢?
方法一、利用host方式解决
根目录下找到项目的 package.json 文件,找到scripts中的dev,将其值加上 --host +本机ip即可。原代码:
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build --force"
},
更改后:
"scripts": {
"dev": "vite --host 192.168.xx.xx",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build --force"
},
效果:
tips:如何查看本机ip?
win+r后输入cmd弹出控制台,在控制台输入ipconfig即可得到ip地址,红框里的就是需要的ip地址
或许你希望两个都出现,见法二。
方法二、利用server来解决
根目录下找到vue.config.js或者vite.config.js文件,在defineconfig里加上下面一段代码
server: {
host: '0.0.0.0'
},
如:
原始:
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
添加后:
export default defineConfig({
plugins: [
vue(),
],
server: {
host: '0.0.0.0'
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
结果如下:
成功解决!