在Docker中访问vite构建的vue项目

使用场景介绍。本地mac作为开发机器,同局域网内的一台Linux主机中的Docker作为开发环境。

需求:可以使用mac远程进Linux机器的docker进行开发。

想法:利用简单的端口映射完成。

步骤一:Docker端口映射

  1. 保存运行中的开发容器
docker commit <容器ID> <输出的镜像名>

停止容器

docker stop <容器 ID> # 停止当前运行的容器
docker rm <容器ID> # (可选)删除不需要的容器
  1. 使用新的端口配置创建新容器
docker run -d --name <新容器的ID> --hostname <新容器的主机名> -p 2222:22 -p 5173:5173 <刚刚commit的镜像名>

步骤二:防火墙开放端口

这一步我们直接开放vite所需的端口,这里大家可以根据自己的实际情况选择不同的方式。我的本地机器上也安装了宝塔面板,所以我直接使用了宝塔,很方便。

步骤三:修改package.json

 "scripts": {
    "dev": "vite --host 0.0.0.0", // 修改了这一行
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint": "eslint . --fix"
  },

至此,大功告成,使用ip:端口的方式即可访问新创建的vue项目。

#前端 #工具 #web

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇