在nginx上部署vue專案(history模式)--demo實列；

龍恩0707發表於2019-06-19
NginxVue模式

在很早之前，我寫了一篇 關於 在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部署就完成了。

注意：本地hosts檔案需要繫結  127.0.0.1   xxx.abc.com

github簡單的原始碼檢視

相關文章