vue部署到Nginx服务器上-博客-网页小功能

vue部署到Nginx服务器上: 原创前端  2019-02-19 19:04:51  浏览：1727

> 我们用 vue-CLI3.0 创建开发好了属于自己的项目“[vue-cli 3.0 安装和创建项目教程](http://www.wyxgn.com/blog/detail-5.html "vue-cli 3.0 安装和创建项目教程")”。怎样部署到服务器上呢？下面我们就来看下部署到Nginx服务器上。

### 1、生成 dist 程序代码
在自己的项目下运行：
```javascript
npm run build
```
你就会发现项目下生成了一个dist文件夹；
把此文件夹上传到Nginx服务器上，做好nginx的配置，就可以浏览了：
```javascript
server {
        listen       80;
        server_name  myvue.com  vuedemo;
        root   "E:/vuedemo/dist";
        location / {		   
            index  index.html index.htm;
            #autoindex  on;
        }
}
```
但是问题也就来了：当你访问 myvue.com 的时候你是可以访问首页的，当你点击样例的另外的路由导航`about`之后，在刷新的时候就会发现报`404 Not Found`,这个是什么原因呢？是因为他没有访问到index.html文件。请看下一步：

### 2、配置 Nginx 服务器配置
把上面的配置改成：
```javascript
server {
        listen       80;
        server_name  myvue.com  vuedemo;
        root   "E:/vuedemo/dist";
        location / {
            try_files $uri $uri/ /index.html last; # 加上了这一行
            index  index.html index.htm;
            #autoindex  on;
        }
}
```
你就发现可以了。这个是单页面项目配置，如果是多页面项目，你会发新其他页面访问不了了，怎么办呢？再改：
```javascript
server {
        listen       80;
        server_name  myvue.com  vuedemo;
        root   "E:/vuedemo/dist";
        location / {
            try_files $uri $uri/ /index.html last; # 加上了这一行
            index  index.html index.htm;
            #autoindex  on;
        }
		
		location /user { # 加上了这块配置，这个是user.html
		    try_files $uri $uri/ /user.html last;
            index  index.html index.htm;
            #autoindex  on;
        }
		
}
```
以此类推几个页面就加几个 `user` 改成对应的页面就可以了。

上一篇：: vue-cli 3.0 安装和创建项目教程
下一篇：: Angular CLI 安装和创建项目教程