...

用Docker干干净净本地搭建Vue.js开发环境

开发环境

  • macOS 10.15.3 (19D76)

  • Docker version 19.03.5, build 633a0ea

1 安装Docker

这个很简单,去官网

安装结束 确认下版本

$ docker-compose --version  
$ docker --version  

2 准备Dockerfile

$ cd /你要的路径/  
$ touch Dockerfile   

写入Dockerfile

FROM node:12.12.0-alpine  

WORKDIR /usr/src/app  

RUN apk update && \  
    npm install -g npm @vue/cli  

EXPOSE 4040  

CMD ["/bin/sh"]  

3 新建容器image

$ docker build -t vue_app_image .  

4 启动容器

$ docker run -v `pwd`:/usr/src/app -p 4040:4040 --name app -it -d vue_app_image  

5 进入容器命令sh

$ docker exec -it app sh  

6 新建vue项目

/usr/src/app # vue create .  

从这里开始进入新建vue项目,然后会问你很多选项。

根据提示选择你想要的模式

我这里选择的是默认 default,然后包管理选择 npm

7 本地环境开启

7-1 修改vue.config.js文件

module.exports = {  
  devServer: {  
    port: 4040,  
    host: '0.0.0.0',  
    disableHostCheck: true,  
  },  
};  

7-2 启动服务

/usr/src/app # npm run serve  

▼▼▼

8 http://localhost:4040/

打开看到熟悉的界面 成功!

共有评论(0)

登陆即可评论哦