打包Vue项目部署到Nginx并访问

一、简介

把 Nginx 做为静态资源服务器，用来部署前端项目，本文介绍 Vue 项目打包、部署到 Nginx 的过程，并解决部署后，因 vue-router 使用 history 模式导致的在直接访问项目和点击路由链接时可以访问，而根地址刷新页面空白的问题。

二、打包项目

Vue的有关build、config的文件均保持原本的配置即可，无需更改 ，终端输入npm run build，成功后会在项目中看到打包好的项目在dist文件夹中。为了去掉URL中的 “ # ”，此时我们 vue-router 使用的是 history 模式，如下：

export default new Router({
  mode: 'history',
  routes: [...]
  )}

三、Docker安装Nginx并部署项目

运行环境

1. 阿里云ECS
2. Ubuntu 系统
3. Docker容器化
   注： 默认已经通过Docker下载好 Nginx 镜像

部署过程

1. 运行 Nginx 容器
   关于在 Docker 中运行 Nginx 容器，以及其配置文件的有关问题请参考：在Docker中运行Nginx 的前两部分。
2. 进入容器，并在 根目录下新建文件夹 xxx（比如你项目的名字）
   进入容器命令：deocekr exec -it 容器名 bash
3. 将打包好的文件（/dist 文件 index.html 和static文件夹）放到Nginx容器 /xxx/ 下
   涉及的命令：
   ①. docker cp 宿主机中文件路径及容器文件名 容器名：要拷贝到容器里面对应的路径

修改配置文件

修改 http server 的location部分如下：

location / {
	root /xxx; # index.html 和 static 所在的目录
	index index.html index.htm;
	try_files $uri $uri/ /index.html; # 为解决 history 模式下，刷新页面时空白的额问题。
}

相关配置参考 vue-router官方教程。

四、重启容器并访问

1. 重启nginx容器：docker stop 容器id，docker start 容器id。
2. 浏览器访问（docker 映射nginx为80端口时）：http://ip。

  
  
Email : Beyonderwei@Gmail.com
Website : http://beyonderwei.com
  
WeChat: