Nginx+Vuejs(router)使用webpack打包釋出(Ubuntu)
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服務:
[email protected]:~# 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的匹配規則,依然沒有成功(慚愧=。=)
更新於2018/9/14
關於上面第六點的疑問,解決辦法是:兩個服務都要用二級域名,二級域名需要在域名管理商處進行解析註冊,修改完畢後的nginx配置如下:
修改/etc/nginx/sites-available/default
檔案,包含兩個server塊,然後重啟nginx服務即可
- 服務站點1
server {
listen 80;
root /home/www/myflask;
server_name web1.domain.cn;
location / {
try_files $uri =404;
include uwsgi_params;
uwsgi_pass 127.0.0.1:8001; # 轉發請求到該地址埠
uwsgi_param UWSGI_SCRIPT main:app; # 呼叫的指令碼名稱和application變數名
}
}
- 服務站點2
server {
listen 80;
root /home/www/web2/public;
server_name web2.domain.cn;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
相關推薦
Nginx+Vuejs(router)使用webpack打包釋出(Ubuntu)
1. 準備工作 前面文章已經介紹到怎樣在win10下安裝部署vuejs的webpack腳手架工具,關於怎樣使用vuejs的webpack工具寫專案不是本文的重點,現在預設我們已經寫好了我們的網站 我的用於學習測試的工程目錄: 修改src/router/
vue-cli webpack打包釋出到nginx伺服器,nginx.conf配置
server { listen 80; root /var/www/web/; index index.php index.html index.htm; server_name www.web.com;
vue使用webPack打包釋出後頁面顯示空白
今天筆者將打包後,進行訪問,訪問到index.html,但是出現的是空白頁。打包命令:npm run build,打包後的檔案如下:這是因為index.html中引入的css ,js 的路徑不對:如下圖這個是因為webpack打包的時候引入js時使用的是絕對路徑導致的,修改w
webpack打包釋出
npm run dev npm run dist --線上 git status git add . git commit -am "online adapter" git push git pull git branch --檢視當前分支是在哪
vue router mode模式在webpack 打包上線問題
vue-router mode模式有兩種 hash和history。 1.hash —— 即位址列 URL 中的 # 符號。比如這個 URL:http://www.abc.com/#/hello,hash 的值為 #/hello。它的特點在於:hash 雖然出現在 U
webpack打包vue-router
文章目錄 webpack打包vue-router 示例 目錄結構 原始碼 執行結果 webpack打包vue-router 在專案中載入vue-router依賴指令如下: cnpm i vu
vuejs使用webpack新增環境常量----多環境開發、打包場景解決方案
使用webpack構建的工程,在開發過程中不同環境的配置不同,在各種環境的打包切換過程中需要手動修改相關配置達到預期目的。但是每次都手動修改會比較麻煩,所以參考了別人解決方案,自己進行總結,實現了不同環境打包分類配置。 參考:vuejs新增環境常量----多環境開發打包場景解決方案之一 - 個人
vue2打包釋出,vue-router進行build無法正常顯示路由頁面
npm run dev檢視沒有問題npm run build打包起一個服務(例如:python -m SimpleHTTPServer)然後檢視index.html頁面,發現路由會請求/first頁面。解決的辦法:將路由配置中history改為hash,將連結中/first改為/#/first。問題解決。
【Qt】在ubuntu上打包釋出Qt程式,可以不依賴Qt環境
參考部落格 親測過程 1、編譯處release版本的Qt程式 2、建立打包資料夾 mkdir release 3、進入資料夾,將要打包的程式拷貝到檔案中 cd rel
原始Vue+webpack打包後部署nginx報404
專案npm run build 之後直接用nginx做為伺服器訪問靜態頁面有下列錯誤檢索頁面發現也就是說路徑為絕對路徑。更改路徑的方式在目錄中index檔案將其更改為相對路徑即可或者直接去除“/”也可。然後重新npm run build即可成功訪問
Asp.net Core 打包釋出 (Linux+Nginx)
前言 在上篇文章中介紹瞭如何在 Docker 容器中部署我們的 asp.net core 應用程式,本篇主要是怎麼樣為我們在 Linux 或者 macOs 中部署的 dotnet 程式建立一個守護程序,來保證我們的程式在異常或者是電腦重啟的時候仍然能夠正常訪問。 如果你以後用準備使用 asp.net c
07 . 前端工程化(ES6模組化和webpack打包css,less,scss,圖片,字型,配置Vue元件載入器和釋出專案)
#### 模組化規範 ##### 傳統開發模式主要問題 ```go /* 1. 命名衝突 2. 檔案依賴 */ ``` `通過模組化解決上述問題` ```go /* 模組化就是把單獨的一個功能封裝在一個模組(檔案)中,模組之間相互隔離, 但是可以通過特定的介面公開內部成員,也可以
webpack 打包壓縮 ES6文件報錯UglifyJs + Unexpected token punc «(», expected punc «:»
htm script 打包壓縮 scripts log res web save pla webpack打包壓縮 ES6 js react報錯: 升級到 babel6 了 ERROR in /Scripts/Test/test.bundle.js from UglifyJ
webpack打包簡單入門
集合 簡單 入口 ges 顯示 技術分享 js文件 dir 配置結果 使用webPack前請先安裝nodejs webpack命令集合 安裝命令:npm install webpack -g 全局安裝npm install webpack --save-dev 當前項
【vue】餓了麽項目-使用webpack打包項目
pat 命令 顯示 項目文件 過程 文件 分享 根目錄 log 1.vue cli給我們提供了npm run build命令打包項目,在packa.json文件中scripts對象中有build屬性,當我們執行npm run build時,就執行build對應的"node
webpack打包css
splay .cn bin style watch 使用 cnp com class 1、第一種方式 1、安裝css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2、引用的時
16.如何做到webpack打包vue項目後,可以修改配置文件
r.js all config rest 技術分享 req api local err 問題描述: 前端需要修改restful API的url,但是打包之後,配置文件找不到了,如果在npm run build 生成dist後,這個配置也被寫死了,傳到運行的前端服務器上後,假
webpack打包註意事項
變量 src ebp bpa exports pan color this 使用 打包protobuf時導出全局變量(使用webpack), 註意文件的編碼為ANSI、UTF(一定要無BOM), 否則webpack復制文件會產生亂碼(js錯誤) packet_confi
vue webpack打包背景圖片
mit ima pac 0kb src com 解決 技術 pack vue的背景圖 和 img標簽圖大於10KB都不會轉成base64處理,可以設置limit(不推薦),所以要設置一個公共路徑,解決辦法如下 vue webpack打包背景圖片
vue-cli的webpack打包,icon無法正確加載
onf 發現 pan ont 資源 ash ons 大小 mit 今天vue-cli打包完發現加載不出font awesome;路經和奇怪,js,css,img都正確加載; 首先正確加載靜態資源需要將config中的index.js中publicPath:‘./‘; 而fo