【前端】打包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，调转指定静态页面

 

 结束！