nginx 伪静态404_0基础教你---Vue全家桶+Nginx+docker部署

0.Vue项目下config/index.js的

assetsPublicPath: '/' --> assetsPublicPath: './'

build/utils.js

1.在Vue项目文件下，输入npm run build 进行打包，项目下生成dist文件。

2.将dist文件上传到服务器中，在同目录下创建Dockerfile文件。

3.Dockerfile内容:

FROM nginx

MAINTAINER jam

# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面

COPY dist/ /usr/share/nginx/html/

4.编译docker镜像

//-t 是镜像名为docker-prod

// . 是当前路径

docker build -t docker-prod .

5.docker容器运行

// -p 把docker 80端口映射到宿主机的8848端口

// -d docker容器后台启动

//docker-prod 镜像名

docker run -p 8848:80 -d docker-prod

6.此时容器已经可以运行了。（curl http://内网ip:端口 可以看到成功运行）

注意：这里开放安全组的相应端口（本文是8848端口，具体依 docker 端口映射情况有所改）

7.此时页面(vue项目)可以成功访问，但是history下，页面一刷新就会出现404错误。Vue是单页面应用

在Nginx配置中增加相应配置即可（文章后面会附上Nginx配置）

8.Vue项目在本地npm run dev可以请求api后端接口，但是部署后会失效。

vue项目config/index.js

所以需要修改Nginx反向代理。Vue只是一个打包生成一个静态页面。

9.修改Nginx配置（本文为了方便，选择直接在docker 容器中进行Nginx配置。也可以选择挂 载Nginx配置文件)

//-it 终端显示

//bash 容器进入执行bash命令

进入docker 容器内后，

安装vim 命令

apt-get update

apt-get install vim

cd /etc/nginx/conf.d （注意是docker容器内的路径）

vi default.conf

10.此时已经部署成功！

附:Nginx关键配置

location / {

root /usr/share/nginx/html;

index index.html index.htm;

try_files $uri $uri/ /index.html;

}

location /api/blog/ {

proxy_pass http://www.xxx.cn:port;

}

location /api/login/ {

proxy_pass http://www.xxx.cn:port/; //尾巴有 /反向代理时会自动去掉/api/login

}