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

俩眼一睁就是学

已于 2024-01-24 09:24:11 修改

阅读量2.4k

点赞数 13

文章标签： vue.js javascript 前端

于 2024-01-23 18:02:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46028703/article/details/135777851

版权

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

结果如下：
在这里插入图片描述
成功解决！