docker 发布vue 项目，linux发布vue项目

nginx发布vue参考：https://www.tnblog.net/aojiancc2/article/details/7510

先使用这个命令打包一下vue项目 npm run build

然后在项目的dist就可以看到打包出来的了。就可以直接点击访问了。
然后其实就是用docker装一个nginx，把nginx访问的页面指向发布出来这个地址就行了。当然发布出来的内容要上传到服务器上。

发布的时候可以在package.json中配置不同的发布命令，以使用不同的配置文件
比如：

"scripts": {
  "build:prod": "vue-cli-service build",
  "build222": "vue-cli-service build",
  "build:19": "vue-cli-service build --mode 19",
  "build:stage": "vue-cli-service build --mode staging",
}

npm run build:19 发布的时候就走的.env.19环境变量的配置
npm run build: prod 发布的时候就走的.env.production配置，以此类推即可

把vue项目打包出来的内容上传的服务器上

可以在服务器上先创建一个文件夹

然后随便借助一个ftp工具就可以上传上去了

然后使用docker安装nginx，指定挂载目录到上传这个目录就行

注意这个有一个路径的坑，如果这样挂载目录

docker run -d \
 --name=mynginx \
 -p 8002:80 \
 -v /fb/wy_jbland_vue:/usr/share/nginx/html \
nginx

这样我们是把nginx里边的html目录挂载到我们的/fb/wy_jbland_vue，这样我们访问是回报错：docker nginx 403 Forbidden。因为里边没有没人没有index.html。但是我们明明刚刚把内容上传到wy_jbland_vue目录了。其实是我们使用了斜杠“/”就表示linux的根目录了。但是我们刚刚创建的文件夹和上传的内容是在root下面的wy_jbland_vue下面，所以造成了问题。-。-一个简单的路径问题坑惨了。

所以应该这样使用就行了

docker run -d \
 --name=mynginx \
 -p 8002:80 \
 -v ~/fb/wy_jbland_vue:/usr/share/nginx/html \
nginx

把斜杠换成~就对了，~在linux就表示root目录。下次内容要更新的话，直接把新的内容替换到~/fb/wy_jbland_vue目录就行了

这样挂载出来的目录如果没有权限可以执行以下

chmod -R 777  ~/fb/wy_jbland_vue

我们还可以把docker安装的nginx的配置文件挂载出来，方便随时修改

docker里边nginx的配置文件默认是在/etc/nginx/conf.d 路径下面

## 进入容器
docker exec -it mynginx /bin/bash
## 进入默认配置文件所在目录
cd /etc/nginx/conf.d
## 查看默认配置
cat default.conf

查看一下默认的配置文件
其实就是平时在windows下用的一样。默认访问的就是/usr/share/nginx/html下面的index.html。所以我们把/usr/share/nginx/html目录挂载到我们刚刚创建的~/fb/wy_jbland_vue就能访问我们发布的vue项目了。

我们要想配置文件方便修改，直接挂载出来就行

总结一下步骤

发布—>上传—>运行nginx镜像,指定挂载到上传目录

发布：

npm run build

打包出来就是dist目录里边的

运行nginx镜像：

主要注意挂载目录
docker run -d \
 --name=mynginx \
 -p 8002:80 \
 -v ~/fb/wy_jbland_vue:/usr/share/nginx/html \
nginx