解决Network: use --host to expose，将项目暴露在网络中。

解决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))
    }
  }
})

结果如下：

成功解决！