Nginx下部署Vue-cli3项目（Ubuntu18.04）教程

• 将vue工程打包，打包完毕会在工程目录下出现一个dist文件夹

<pre class="has">

yarn build

- 配置nginx-指向dist文件夹

  
  
  
 \* 在/etc/nginx/sites-enabled文件夹下新建skill.conf文件

  
  
  
  
  

```
sudo vi /etc/nginx/sites-enabled/skill.conf
```

  
  
  
 \* 内容如下

  
  
  
  
  
```
```
server {
           
         listen 80;
         server_name  localhost;
 
         #charset koi8-r;
 
         #access_log  logs/host.access.log  main;
 
         location / {
           root /home/user/Downloads/resume/resume-frontend/dist; //你的dist文件夹位置
           try_files $uri $uri/ /index.html last; //解决history模式除主页外404问题
           index index.html index.html;
        }
     }
```

  
  
  
  
  
- 测试（重启nginx，访问项目）

  
  
  
```
```
service nginx restart
```

  
  
  
\* 访问

  
  
  
  
  
[http://localhost:80](http://localhost)

  
  
- 注意

  
  
  
\* 如果你的vue工程用的路由是history模式，需要将客户端发来的url重定向到默认的index.html，才能正常访问。否则只能看到主页。刷新或点击其他页面都会404 。-- 即上面的try\_files配置  
\* root后面的地址是项目上传的路径。try\_files是添加到index的映射。