zoukankan      html  css  js  c++  java
  • 【前端】打包vue项目到nginx过程

    一.基于docker安装nginx

    1.安装docker: 参考docker安装步骤

    2.安装nginx

    拉取镜象

    docker pull ngnix
    启动临时容器
    目的:将容器中需要文件夹复制出来做映射备用
    docker run --name tmp-ng -d nginx
    新建本地文件夹
    mdkir -p /docker/nginx
    将容器目录复制出来
    docker cp -a tmp-ng:/usr/share/nginx/html /docker/nginx/html
    docker cp tmp-ng:/etc/nginx/nginx.conf /docker/nginx/nginx.conf
    docker cp tmp-ng:/etc/nginx/conf.d /docker/nginx/conf.d
    删除临时镜象
    docker stop tmp-ng
    docker rm tmp-ng(CONTAINER ID)
    运行容器实例并映射到本地目录
    docker run --name nginx-1 -e TZ="Asia/Shanghai" -d -p 80:80
    -v /docker/nginx/html:/usr/share/nginx/html
    -v /docker/nginx/nginx.conf:/etc/nginx/nginx.conf
    -v /docker/nginx/conf.d:/etc/nginx/conf.d
    -v /docker/nginx/logs:/var/log/nginx
    nginx
    访问端口出现nginx默认页面
     二.打包vue项目部署到nginx

    1.创建测试vue项目

    vue init webpack vue01
    cd vue01
    npm install
    npm run dev
    npm run build
    最终在vue01目录生成dist资源文件

     打开index.html,如出现白板可能是相对路径问题,设置index.html中路径为相对路径即可

    最终访问出现如下界面,即成功:

     2.打包部署到nginx

    打包成dist.zip
    使用lrzsz命令工具上传到 /docker/nginx/html
    解压:unzip dist.zip -d ./
    修改defalut.conf (windos上为nginx.conf)

    docker restart nginx-1

    浏览器访问 ip:80,调转指定静态页面

     结束!

  • 相关阅读:
    你看,那个人好像一条狗哎
    我竟然被抓去做了比特币挖矿工
    聊聊JAVA中 String类为什么不可变
    三分钟深入TT猫之故障转移
    shell实现两个数的相加
    shell截取字符串的方法
    Vi命令:如何删除全部内容?
    bash中不可以用字符串做数组下标
    awk打印出当前行的上一行
    awk同时处理多个文件
  • 原文地址:https://www.cnblogs.com/coder-ydq/p/13529560.html
Copyright © 2011-2022 走看看