在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部署就完成了。
注意:本地hosts檔案需要繫結 127.0.0.1 xxx.abc.com
github簡單的原始碼