企业官网建设流程全解析

1、方案

1.1 修改package.json配置

在 package.json中找到 scripts部分，修改开发服务器启动命令：

{"scripts":{"serve":"vue-cli-service serve --host 0.0.0.0 --port 8080","dev":"vite --host 0.0.0.0 --port 3000"}}

注意：

• Vue CLI 项目使用 --host 0.0.0.0
• Vite 项目使用 --host

1.2 创建配置文件(推荐)

对于 Vite 项目：
创建或修改 vite.config.js/ vite.config.ts：

import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({plugins:[vue()],server:{host:'0.0.0.0',// 监听所有网络接口port:3000,// 指定端口strictPort:true,// 如果端口被占用直接退出open:false,// 禁止自动打开浏览器// 配置代理（如果需要）proxy:{'/api':{target:'http://localhost:5000',changeOrigin:true,rewrite:(path)=>path.replace(/^\/api/,'')}}}})

对于 Vue CLI 项目：
创建或修改 vue.config.js：

module.exports={devServer:{host:'0.0.0.0',// 监听所有网络接口port:8080,// 指定端口open:false,// 禁止自动打开浏览器// 配置代理proxy:{'/api':{target:'http://localhost:5000',changeOrigin:true,pathRewrite:{'^/api':''}}}}}

2、获取本机IP地址

启动后，需要将本机IP地址告诉其他人。获取方法：
Windows：

ipconfig# 查找 IPv4 地址，通常是 192.168.x.x

macOS / Linux：

ifconfig# 或ipaddr

3、防火墙配置

确保防火墙允许相应端口的访问：
Windows：

# 允许端口（管理员权限）netsh advfirewall firewalladdrulename="Vue Dev Port"dir=inaction=allowprotocol=TCPlocalport=8080

macOS：

# 临时禁用防火墙sudo/usr/libexec/ApplicationFirewall/socketfilterfw --setglobalstate off# 或添加端口例外sudo/usr/libexec/ApplicationFirewall/socketfilterfw --add<your-app-path>--noauth

4、让其他人访问

启动项目后，其他人可以通过以下地址访问：

http://你的IP地址:端口号

例如：http://192.168.1.100:3000

5、完整操作步骤

• 配置 vite.config.js或 vue.config.js
• 启动项目：npm run dev
• 获取本机IP地址
• 确保防火墙允许访问
• 将访问地址分享给其他人
• 确保所有设备在同一局域网内

6、注意事项

• 确保所有人都在同一局域网下
• 部分公司网络可能有安全限制
• 如果使用代理，需要同事也配置相应的代理设置
• 移动设备可能需要关闭移动数据，只使用WiFi
• 开发环境不要在生产环境使用此配置

7、高级需求:ngrok实现内网穿透

如果需要外部网络访问，可以使用 ngrok：

# 安装 ngroknpminstall-g ngrok# 启动本地服务npmrun dev# 在另一个终端运行ngrok http3000

ngrok 会提供一个公开的 URL 地址，任何人都可以访问。