使用Docker部署Vue项目

Docker镜像+nginx 部署 vue 项目

一、打包vue项目

  在开发完的vue项目输入如下命名,打包生成dist文件夹

yarn build / npm run build

  此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西。

  如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目。

创建 nginx config配置文件

 在项目根目录下创建nginx文件夹,该文件夹下新建文件default.conf

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;
        #  注意⚠️:如果vue-router使用的是history模式,try_files $uri $uri/ /index.html;  非常重要!!!
        # 如果使用了hash模式,可以省略这个
        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;
    }
}

上面的文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

编写Dockerfile

在项目的根目录下创建Dockerfile文件

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER cuianbing <cuianbing@outlook.com>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

构建项目

docker build -t imagesName .
posted @   崔安兵  阅读(2497)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示