在nginx上部署vue项目(history模式)--demo实列；

在很早以前，我写了一篇 关于 在nginx上部署vue项目(history模式) 可是讲的都是理论，因此今天作个demo来实战下。有必要让你们更好的理解，我发现搜索这相似的问题仍是挺多的，所以在写一篇有关这方面的实战文章。
在讲解以前，咱们仍是和之前同样，一步步来，先看下咱们项目的整个架构。

|------- 项目的根目录
|  |--- app
|  | |--- index
|  | | |--- components
|  | | | |--- home.vue
|  | | | |--- index.vue
|  | | | |--- java.vue
|  | | | |--- node.vue
|  | | | |--- xxx.vue
|  | | |--- app.js
|  | | |--- router.js
|  |--- views
|  |--- package.json
|  |--- webpack.config.js

整个项目架构基本上如上一个简单的结构。下面咱们来分别贴下代码吧：

app/index/components/index.vue 代码以下：

<style lang="stylus">
  
</style>

<template>
  <div id="app">
    <header>
      <router-link to="/home">Home</router-link>
      <router-link to="/java">java</router-link>
      <router-link to="/node">node</router-link>
      <router-link to='/xxx'>XXX</router-link>
    </header>
    <!-- 对应组件的内容渲染到router-view中 -->
    <router-view></router-view>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

app/index/components/home.vue 代码以下：

<style lang='stylus'>
  .home-container
    width 100%
</style>

<template>
  <div class="home-container">
    <h1>欢迎来到home页面</h1>
    <router-view></router-view>
  </div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        msg: ''
      }
    },
    methods: {
      
    }
  }
</script>

app/index/components/java.vue 代码以下：

<style lang='stylus'>
  .java-container
    width 100%
</style>

<template>
  <div class="java-container">
    <h1>欢迎来到java类书籍</h1>
    <p>{{msg}}</p>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        msg: '我是java组件'
      }
    },
    methods: {
      
    }
  }
</script>

app/index/components/node.vue 代码以下：

<style lang='stylus'>
  .node-container
    width 100%
</style>

<template>
  <div class="node-container">
    <h1>欢迎来到node类书籍</h1>
    <p>{{msg}}</p>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        msg: '我是node组件'
      }
    },
    methods: {
      
    }
  }
</script>

app/index/components/xxx.vue 代码以下：

<style lang='stylus'>
  .xxx-container
    width 100%
</style>

<template>
  <div class="xxx-container">
    <h1>欢迎来到xxx</h1>
    <p>{{msg}}</p>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        msg: '我是XXX组件'
      }
    },
    created() {
      console.log(this.$route.params.id)
    }
  }
</script>

app/index/app.js 代码以下：

import Vue from 'vue';

import Index from './components/index';

// 引入路由
import router from './router';

new Vue({
  el: '#app',
  router: router,
  render: h => h(Index)
});

app/index/router.js 代码以下：


import Vue from 'vue';
import VueRouter from 'vue-router';

// 告诉 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    name: 'home',
    component: resolve => require(['./components/home'], resolve)
  },
  {
    path: '/java',
    name: 'java',
    component: resolve => require(['./components/java'], resolve)
  },
  {
    path: '/node',
    name: 'node',
    component: resolve => require(['./components/node'], resolve)
  },
  {
    path: '/xxx',
    name: 'xxx',
    component: resolve => require(['./components/xxx'], resolve)
  },
  {
    path: '*', // 其余没有的页面都重定向到 home页面去
    redirect: '/home'
  }
]

var router = new VueRouter({
  base: '', // 配置单页应用的基路径
  routes: routes,
  mode: 'history'
});

export default router;

如上就是全部的代码。而后就是webpack.config.js 代码了。

webpack.config.js 代码我就不贴代码了，到时候你们能够看下github源码便可：

package.json 代码以下：

"scripts": {
  "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "webpack --progress --colors --devtool cheap-module-source-map"
},

如今一切准备就绪完成后，咱们运行 命令 npm run dev 后就能够启动咱们的服务了，而后当咱们访问：

http://0.0.0.0:8083/java

就能够看到以下信息了：

可是当咱们刷新下 就变成以下了：

具体什么缘由，请看我以前的这篇文章解释. 我这边就再也不描述了。所以如今咱们须要在nginx上配置下便可。

实现步骤. 咱们首先 运行 npm run build 打包正式环境，而后在咱们的项目根目录下会生成 dist 文件夹，而后再把咱们生成的dist 文件夹的全部页面扔到nginx服务器下的html文件夹下。而后咱们就须要在nginx上配置便可。

首先执行 npm run build 打包，打包完成后，咱们能够看到项目的根目录下有dist目录，以下所示：

而后咱们查看下 dist/index.html 页面，会把css和js自动加上去，代码以下：

如今咱们须要把dist目录下的文件放到 nginx下的html文件夹下。所以咱们须要移动目录了。

我本地的nginx的html目录路径是以下：/usr/local/Cellar/nginx/1.15.12/html 以下所示：

1. 咱们先须要在该html目录下，新建一个文件夹，来保存全部的资源文件，假如我这边叫 vuedemo. 建立文件以下所示：

2. 咱们如今把咱们的打包的dist目录下的全部文件复制到 /usr/local/Cellar/nginx/1.15.12/html/vuedemo 目录下：先进入咱们的项目根目录下，使用命令：cp -Rf dist/* /usr/local/Cellar/nginx/1.15.12/html/vuedemo  以下所示：

而后咱们再查看下 /usr/local/Cellar/nginx/1.15.12/html/vuedemo 下的文件，看是否复制过来了没，以下所示：

如今文件一切准备好了，如今咱们须要在咱们的nginx下配置便可：

3. 使用 sudo open /usr/local/etc/nginx/nginx.conf -a 'sublime text' 使用编辑器sublime打开)。

而后在nginx.conf 配置信息以下：

worker_processes  1;
events {
    worker_connections  1024;
}

http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       8022;
    server_name  xxx.abc.com;
    root html/vuedemo;
    index index.html;
    location ~ ^/favicon\.ico$ {
      root html/vuedemo;
    }
    location / {
      index index.html index.htm;
      try_files $uri $uri/ @fallback;
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
      proxy_set_header   Host             $host;
      proxy_set_header   X-Real-IP        $remote_addr;
      proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
      proxy_set_header   X-Forwarded-Proto  $scheme;
    }
    location @fallback {
      rewrite ^.*$ /index.html break;
    }
  }
  include servers/*;
}

注意：

1. 咱们的vuedemo的路径是在nginx下的，如：/usr/local/Cellar/nginx/1.15.12/html/vuedemo 这个下的，vuedemo文件夹下是存放的是咱们使用webpack打包全部的dist目录下的资源文件。以下所示：

所以咱们如上server中的root(根目录) 是从 html/vuedemo 文件开始的。index index.html 这样的，默认主页面是 index.html. try_files的基本语法我这边再也不描述，有兴趣的话看我以前这篇文章

2. 是否注意到，我listen(监听的)是 8022，原本应该是80的，这样访问页面的时候就不用添加端口号，可是也不知道为何我本地安装的nginx默认的端口号不是80，而是8080. 因此若是我监听80端口号的话，会有问题。所以这边先无论。

如上配置完成后，咱们就能够再页面上访问 http://xxx.abc.com:8022/home 就能够访问到页面了，无论我页面刷新多少次，都是这个页面；以下所示：

点击任何一个路由的话，好比点击java路由，再刷新的话也是能够的，以下所示：

所以nginx部署就完成了。

github简单的源码查看