Docker镜像+nginx部署vue项⽬的⽅法
⼀、打包vue项⽬
  在开发完的vue项⽬输⼊如下命名，打包⽣成dist⽂件夹
yarn build / npm run build
  此时根⽬录会多出⼀个⽂件夹：dist⽂件夹，⾥⾯就是我们要发布的东西。
  如果将该dist⽬录整个传到服务器上，部署成静态资源站点就能直接访问到该项⽬。
⼆、获取nginx 镜像
  nginx 是⼀个⾼性能的HTTP和反向代理服务器，此处我们选⽤ nginx 镜像作为基础来构建我们的vue应⽤镜像。  在终端输⼊：
docker pull nginx
  即可以获取到nginx镜像。
  Docker镜像是⼀个特殊的⽂件系统，除了提供容器运⾏时所需的程序、库、资源、配置等⽂件外，还包含了⼀些为运⾏时准备的⼀些配置参数（如匿名卷、环境变量、⽤户等）。镜像不包含任何动态数据，其内容在构建之后也不会被改变。
　在终端输⼊如下命令，可以看到nginx的镜像
docker image ls
  镜像结果如下所⽰：
三、创建 nginx config配置⽂件
  在项⽬根⽬录下创建nginx⽂件夹，该⽂件夹下新建⽂件f
server {
listen    80;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root  /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page 404      /404.html;
# redirect server error pages to the static page /50x.html
#
error_page  500 502 503 504 /50x.html;
location = /50x.html {
root  /usr/share/nginx/html;
}
}
  注意⚠ ：如果vue-router使⽤的是history模式，try_files $uri $uri/ /index.html; ⾮常重要
  因为我们的应⽤是单页客户端应⽤，如果后台没有正确的配置，当⽤户在浏览器访问地址时，就会返回404。
  所以需要在服务端增加⼀个覆盖所有情况的候选资源，如果URL匹配不到任何静态资源，则应该返回同⼀个index.html页⾯，这个页⾯就是你app依赖的页⾯。
  上⾯的⽂件定义了⾸页的指向为 /usr/share/nginx/html/index.html, 所以我们可以⼀会把构建出来的index.html⽂件和相关的静态资源放到/usr/share/nginx/html⽬录下。
四、创建 Dockerfile ⽂件
# 设置基础镜像
FROM nginx
# 定义作者
nginx部署前端项目MAINTAINER lihui <1107136746@qq>
# 将dist⽂件中的内容复制到 /usr/share/nginx/html/ 这个⽬录下⾯
COPY dist/ /usr/share/nginx/html/
#⽤本地的 f 配置来替换nginx镜像⾥的默认配置
COPY f /etc/nginx/conf.f
五、基于该Dockerfile构建vue应⽤镜像
  运⾏如下命令，注意不要少了最后的“ . ”
docker build -t test .
  -t 是给镜像命名，test是⽣成镜像的名字，. 是基于当前⽬录的Dockerfile来构建镜像。
  基于vue的镜像就⽣成好了！
以上就是Docker镜像+nginx 部署 vue 项⽬的⽅法的详细内容，更多关于docker部署vue项⽬的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。