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 ``` tn2>这样我们是把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 ```