修改端口
项目的运行之后，默认的端口是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目录的区别，这里顺便讲一下他们的区别。
-
public目录： -
public目录是一个静态资源目录，用于存放不需要经过构建处理的静态文件。 -
在 public目录中的文件会直接被复制到最终构建的输出目录中，而不会经过打包处理。 -
在代码中引用 public目录中的文件时，需要使用绝对路径或相对于根路径的路径。 -
通常， public目录中的文件适用于一些不需要通过构建过程处理的静态资源，比如favicon.ico、robots.txt等。 -
assets目录： -
assets目录是一个资源目录，用于存放需要经过构建处理的静态文件。 -
在 assets目录中的文件会被Webpack等构建工具进行处理，比如压缩、编译、打包等。 -
在代码中引用 assets目录中的文件时，可以使用相对路径的方式进行引用。 -
通常， assets目录中的文件适用于需要经过构建处理的静态资源，比如图片、样式文件、字体文件等。
总结来说，public目录适用于存放不需要经过构建处理的静态资源，而assets目录适用于存放需要经过构建处理的静态资源。
在Vue 3的项目中，通常会将一些全局的静态资源放在public目录中，而将与组件相关的静态资源放在assets目录中。
以上就是今日分享的文章，大家晚安啦！
原文始发于微信公众号（大前端编程教学）：Vue3 x Vite修改端口和设置显示IP网络
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/223985.html
