vue本地项目手机访问

vue本地项目手机访问


关于本地上同一局域网访问电脑上vue项目
找到package.json文件,添加–host 0.0.0.0即可

“scripts”: {
“dev”: “webpack-dev-server –host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js”,
“start”: “npm run dev”,
“build”: “node build/build.js”
},

或者在“~/config/index.js”文件中加host: ‘0.0.0.0’,

module.exports = {
dev: {

host: ‘0.0.0.0’, // can be overwritten by process.env.HOST localhost
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free …
},

}

本地部署 Vue 项目后,若希望在手机浏览器中访问项目,需确保设备与本地服务器处于同一网络环境中,并通过正确的 IP 地址和端口进行访问。以下是具体的操作方法和注意事项: ### 本地部署 Vue 项目 首先,通过 `npm run build` 命令对 Vue 项目进行打包,生成 `dist` 文件夹,该文件夹中包含了可用于部署的静态资源文件 [^2]。接下来,可以使用以下工具之一启动本地 HTTP 服务器: - **使用 `http-server`** 安装并运行 `http-server`,默认会在 `localhost:8080` 上提供服务。确保项目文件夹中包含 `dist` 目录,并在该目录下运行命令: ```bash npx http-server ``` - **使用 `serve`** 安装 `serve` 并运行以下命令启动服务: ```bash npx serve ``` - **使用 Nginx** 配置 Nginx 以提供静态文件服务,将 `dist` 文件夹路径设置为根目录。例如,在 Nginx 的配置文件中添加以下内容: ```nginx server { listen 80; server_name localhost; root /path/to/your/dist; index index.html; location / { try_files $uri $uri/ =404; } } ``` 然后启动或重启 Nginx 服务 [^1]。 ### 通过手机访问本地部署的 Vue 项目 确保本地服务器和手机处于同一局域网中。例如,若本地服务器的 IP 地址为 `192.168.1.100`,且服务运行在 `8080` 端口,则在手机浏览器中输入以下地址即可访问: ``` http://192.168.1.100:8080 ``` 如果使用的是防火墙或路由器,确保对应的端口(如 `8080`)已开放,以便外部设备可以访问该端口 [^3]。此外,若使用的是 Windows 系统,还需检查 Windows 防火墙设置,确保允许入站规则中包含该端口。 ### 相关问题 1. 如何在本地部署 Vue 项目时使用 HTTPS? 2. 如何将 Vue 项目部署到远程服务器? 3. Vue 项目部署到 IIS 服务器需要注意哪些事项? 4. 如何在 Docker 中部署 Vue 项目? 5. 如何通过域名访问本地部署的 Vue 项目
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值