1. 準備工作
前面文章已經介紹到怎樣在win10下安裝部署vuejs的webpack腳手架工具，關於怎樣使用vuejs的webpack工具寫項目不是本文的重點，現在默認我們已經寫好了我們的網站
- 我的用於學習測試的工程目錄：
- 修改
src/router/index.js這個文件中的路由配置：使用history模式和路由基目錄base的設置（更多資料可查閱官方文檔）
/**** src/router/index.js ****/
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ItemPage from '@/components/ItemPage'
import NotFoundComponent from '@/components/NotFoundComponent'
Vue.use(Router)
export default new Router({
mode: 'history',
base: '/',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/page',
name: 'page',
component: ItemPage
},
{
path: '*',
name: 'NotFound',
component: NotFoundComponent
}
]
})2. 打包vuejs工程
在工程的根目錄下執行指令：npm run build
- 很多博客說要修改什麼路徑加個點，我看到一篇博文說其實不然，如果是這樣爲什麼官方不默認直接幫我們加上呢？反正我沒有動
config/index.js - 執行完後會在工程根目錄下生成一個
dist的文件夾，內容大概是這樣的：
3. 上傳文件並配置nginx
把上面生成的
dist整個文件夾的文件上傳到公網可訪問的服務器，假設這裏上傳到的位置是：/home/www/test/public默認我們的服務器已經成功安裝了nginx
root@ubuntu:~# apt-get install nginx root@ubuntu:~# /etc/init.d/nginx start修改nginx配置文件（參考官方文檔）
server { listen 80; server_name ip或者域名; root /home/www/test/public; index index.html; location / { try_files $uri $uri/ /index.html; } }- 重啓nginx服務：
root@ubuntu:~# service nginx restart
4. 訪問我們的網站
- 直接訪問ip或域名即webpack默認保留的主頁
- 訪問
ip或域名/page可以訪問到我們自己寫好的page路由對應的頁面 - 正如官方文檔所說，像上面那樣配置nginx之後，我們的服務器不再返回404錯誤頁面，因爲對於所有路徑都會返回index.html文件。爲了避免這種情況，所以我根據官方文檔的建議寫了一個404頁面，也就是準備工作裏的
NotFoundComponent，就是說：所有在vue路由找不到正確匹配的頁面都會返回定義好的404頁面，如下圖所示訪問的是ip或域名/he：
5. 一個彩蛋
上面的404頁面有一個a標籤，點擊它是在當前頁面刷新出/page頁面的，也就是說沒有支持_blank屬性的a標籤。
一開始我單純使用a標籤是無法完成跳轉的，搜索並查閱了一些資料，最後我是這樣寫的：
<p>You can visit our web <router-link to='/page'>here</router-link></p>更多資料參考官方文檔
6. 我的疑問
其實真正的實際情況是：我的服務器的80端口已經被一個服務佔用了，折騰了大半天還是沒辦法解決使用80端口同時接管兩個服務的問題，最後我是使用了8080端口來接管我的vuejs項目的。
嘗試過二級域名的辦法，vuejs的主頁頁面會返回nginx的默認歡迎頁面；嘗試過各種location的匹配規則，依然沒有成功（慚愧=。=）
如果哪位小夥伴有解決辦法的話希望能告訴我。。不勝感激。。（當作給自己留坑吧=。=）