在很早之前，我寫了一篇 關於 在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