Vue3 x Vite修改端口和设置显示IP网络

Vue3 x Vite修改端口和设置显示IP网络

修改端口

项目的运行之后，默认的端口是5173，现在我们来改一下端口号 打开vite.config.js文件：

export default defineConfig({
  server: {
    port: 3000
  },
});

启动后地址就变成： http://localhost:3000/

设置显示IP网络

在server对象中添加host属性，并指定要显示的IP地址。 例如，使用 0.0.0.0 接受来自所有网络接口的连接。

export default defineConfig({
  server: {
    host: '0.0.0.0',
  },
});

启动后，访问控制台显示的地址，应用程序将在IP网络上执行。 例如，可以访问 http://192.168.1.100:3000 等地址。 此设置将允许你的 Vite 项目在特定 IP 地址上运行，并且可以从本地网络内的其他设备访问。 不过，Vite开发服务器默认没有安全连接，所以在生产环境中使用时要小心。

public目录和assets目录的区别

有些小伙伴不是很理解public目录和assets目录的区别，这里顺便讲一下他们的区别。

1. public目录：

   • public目录是一个静态资源目录，用于存放不需要经过构建处理的静态文件。
   • 在public目录中的文件会直接被复制到最终构建的输出目录中，而不会经过打包处理。
   • 在代码中引用public目录中的文件时，需要使用绝对路径或相对于根路径的路径。
   • 通常，public目录中的文件适用于一些不需要通过构建过程处理的静态资源，比如favicon.ico、robots.txt等。

2. assets目录：

   • assets目录是一个资源目录，用于存放需要经过构建处理的静态文件。
   • 在assets目录中的文件会被Webpack等构建工具进行处理，比如压缩、编译、打包等。
   • 在代码中引用assets目录中的文件时，可以使用相对路径的方式进行引用。
   • 通常，assets目录中的文件适用于需要经过构建处理的静态资源，比如图片、样式文件、字体文件等。

总结来说，public目录适用于存放不需要经过构建处理的静态资源，而assets目录适用于存放需要经过构建处理的静态资源。

在Vue 3的项目中，通常会将一些全局的静态资源放在public目录中，而将与组件相关的静态资源放在assets目录中。