Vue项目部署到Docker中

随笔

Vue项目打包

1，首先先进入vue项目中键入npm run build 打包项目

npm run build

然后在项目的根目录下dist文件夹，里面通常有一个static文件夹及index.heml页面也是项目的入口。

2，将项目scp 到linux中，如果使用的xshell连接的虚拟机可以在下载个xftp连接一下传文件比较方便，如果没有即在windows环境下使用cmd命令连接虚拟机进行传输项目

scp D:workspaceue root@192.168.2.11:/opt/nginx
#D:workspaceue是你windows下的vue项目存放路径，后面root@192.168.2.11:/opt/nginx则是虚拟机的ip:存放的位置

3，如果报错则证明是对的，因为scp 传输文件夹的话需要加一个 -r ，也就变成了下面这样

scp -r D:workspaceue root@192.168.2.11:/opt/nginx

4,此时你的vue项目存放到docker中就完成了一半，下面进行linux中的操作

Docker中配置部署运行项目

1，首先要下载个nginx镜像

docker pull nginx
#如果需要指定版本可以在nginx后面加上   :版本号

2，然后进入刚才存放dist目录中在我这也就是/opt/nginx，编写一个nginx的默认文件。

#进入list存放的目录
cd /opt/nginx
#写个nginx的配置文件
vim default.conf