1. 程式人生 > >通過Vue CLI 快速建立Vue專案並部署到tomcat

通過Vue CLI 快速建立Vue專案並部署到tomcat

前言

最近一直在寫前端,用的是JSP,但是很多人都說JSP已經過時了。既然做了幾個月的前端,那就把前端學的好一點,學點新技術,跟上潮流。感覺Vue挺火的,所以這幾天學了一下Vue,開始看的官方文件,然後直接用GitHub上比較火的專案進行學習,本地跑起來,看看效果、原始碼和程式碼結構,學習相關的外掛等,並部署了其中一個專案到我的二級域名下:vue.dongkelun.com(感覺這個專案裡的東西挺全的)。

因為一直用的github上別人搭建好的專案進行學習,擔心和用Vue CLI建立的專案的程式碼結構有區別,所以就看了一下Vue CLI的官方文件,進行簡單搭建,看看到底有什麼區別,做到心中有數。

1、前提

首先你要安裝好nodejsyarn,直接在官網下載安裝包,一鍵安裝即可,不需要什麼環境配置,我安裝的是最新版本(node-v10.13.0、yarn-1.12.3)

2、安裝

  • 同時寫Vue CLI 3和Vue CLI 2 的原因是官方預設的是3,而自己學習的GitHub上的專案為2~

2.1 新版本 Vue CLI 3

  • 寫這篇文章的時候官網預設的為Vue CLI 3
npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.2 舊版本 Vue CLI 2

npm install -g @vue/cli-init
# `vue init` 的執行效果將會跟 `
[email protected]
` 相同

3、建立專案

Vue CLI 3:

vue create hello-world

Vue CLI 2:

vue init webpack my-project
  • 一直按回車為預設選項,手動設定請參考官方文件

4、執行專案

Vue CLI 3:

cd hello-world
yarn serve

Vue CLI 2:

cd my-project/
npm run dev

5、驗證

在瀏覽器輸入localhost:8080,看見下圖圖所示的效果即為成功



6、構建

yarn build
# OR
npm run build

會生成一個dist資料夾

7、部署

7.1 本地預覽

dist 目錄需要啟動一個 HTTP 伺服器來訪問 (除非你已經將 baseUrl 配置為了一個相對的值),所以以 file:// 協議直接開啟 dist/index.html 是不會工作的。在本地預覽生產環境構建最簡單的方式就是使用一個 Node.js 靜態檔案伺服器,例如 serve

安裝serve:

npm install -g serve

啟動:

serve -s dist
INFO: Accepting connections at http://localhost:5000

7.2 部署到tomcat

預設的配置直接部署到tomcat,是有錯誤的(在瀏覽器檢查裡發現是找不到對應的靜態檔案,原因是路徑不對),需要修改一下配置,版本2和版本3的配置也不一樣

Vue CLI 3:
在hello-world新建vue.config.js,並新增如下內容

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/hello-world/'
    : '/'
}
assetsPublicPath: './',

重新build,將生成的dist資料夾複製到tomcat目錄下的webapps資料夾下,可以將dist資料夾改名為hello-world,那麼訪問路徑就為
ip/hello-world,也可以不改名那麼訪問路徑就為ip/dist,效果檢視vue.dongkelun.com/hello-worldvue.dongkelun.com/dist

8、其他問題

8.1 npm run dev啟動後,用Ctrl+c,關閉不了對應的程序

原因是在Git Bash Here裡執行的命令,一種方法是在windows 的shell裡執行命令(輸入cmd進入),另一種辦法是如果不想放棄git的命令列的話,每次啟動完用tskill node殺死程序。

8.2 依然想用 npm run dev 啟動上面的hello world程式

辦法是修改package.json檔案,找到scripts下的"serve": “vue-cli-service serve”,複製這一行到下一行將key(serve)改為dev即可

  • 自己可以對比一下,兩個版本的package.json檔案的差異,多嘗試一下就瞭解了

相關閱讀

相關推薦

通過Vue CLI 快速建立Vue專案部署tomcat

前言 最近一直在寫前端,用的是JSP,但是很多人都說JSP已經過時了。既然做了幾個月的前端,那就把前端學的好一點,學點新技術,跟上潮流。感覺Vue挺火的,所以這幾天學了一下Vue,開始看的官方文件,然後直接用GitHub上比較火的專案進行學習,本地跑起來,看看

vue-cli快速搭建vue專案上傳github

首先我們先用vue-cli快速搭建vue專案。 假設你的電腦上已經安裝好了nodejs(如何安裝nodejs此處跳過,網上很多教程),那麼接下來就安裝vue-cli。 1、全域性安裝vue-cli,程

使用vue-cli腳手架建立vue+webpack專案

Vue-cli是快速構建這個單頁應用的腳手架。 使用npm全域性安裝vue-cli(前提是你已經安裝了nodejs,否則你連npm都用不了),在cmd中輸入一下命令: 1.npm install –

vue-cli快速搭建vue專案

1.安裝node(使用6+) 2.安裝cnpm:安裝包時,記得以管理員許可權開啟cmd 3.安裝vue-cli :npm install -g vue-cli 4.建立專案:vue init webpack XX  (請確保安裝了webpack) 5.開發模

vue-cli腳手架建立專案在IE6、7、8出現白屏問題的解決方法

解決ie和火狐瀏覽器打不開vue腳手架專案的問題:  1)webpack.base.conf.js   app: ['babel-polyfill', './src/main.js']  2)index.js  assetsPublicPath: './'  3)main.j

vue-cli快速生成vue專案

一、全域性安裝webpack npm install webpack -g 二、安裝node 三、全域性安裝vue-cli npm install vue-cli -g 四、生成專案  vue init webpack project_name 五、安裝依賴模組

vue-cli快速構建vue項目

div 項目文件 項目 運行 百度一下 nod install 快速 文件 1、安裝node 。。。。。。百度一下 2、安裝vue-cli npm install -g vue-cli 3、創建項目 4、進入項目文件,安裝依賴 5、運行 npm run dev

vue-cli 快速構建vue應用,實現webpack打包

一、什麼是vue-clivue-cli是由vue官方釋出的快速構建vue單頁面的腳手架。參見vue-cli官方網站。http://vuejs-templates.github.io/webpack/之前需要使用vue的單檔案元件的功能,即將不同的模板分離到不同的.vue字尾的

vue-cli 快速構建vue應用,webpack打包

一、vue-clivue-cli是由vue官方釋出的快速構建vue單頁面的腳手架。參見vue-cli官方網站。http://vuejs-templates.github.io/webpack/之前需要使用vue的單檔案元件的功能,即將不同的模板分離到不同的.vue字尾的檔案中

eclispe建立專案部署到svn

1. 錯誤: 找不到或無法載入主類 com.highmall.core.config.HighMallConfig HighMallConfig.class檔案丟失造成 解決方法:clean專案 2. eclispe建立新專案並部署到svn ①修改專案包名及專案中的.project檔

Intellij Idea 建立Web專案部署servlet

在網上看到一篇很詳細的 intelliJ IDEA 建立web專案並簡單部署servlet的圖文教程,並結合最新版本的Intellij Idea做出了一點修改,轉載出處是 http://www.it165.net/pro/html/201505/41042.h

IDEA 旗艦版 使用Maven建立Web工程 部署tomcat

這個因為是旗艦版的,所以比較簡單::: 1.建立一個Project 2. 3. 4.這裡在Properties中新增一個引數archetypeCatalog=internal,不加這個引數,在maven生成骨架的時候將會非常慢,有時候會直接卡住。

IDEA 社群版 使用Maven建立Web工程 部署tomcat(解決無tomcat的問題)

很多人使用idea構建web專案的時候在煩惱,為什麼我的破idea找不到Web Appplication,找不到Web Appplication就新建不了tomcat。 其實我們在下載的時候沒有分清楚idea是有兩種版本的,一個是社群版,一個是旗艦版(要錢的)。旗艦版的

Vue筆記——搭建腳手架快速建立Vue專案

現在的Vue腳手架已經升級到3.x版本,即vue-cli3。 腳手架升級之後,安裝的命令發生了變化,所以這篇文章會跟大家演示新舊版本的腳手架安裝過程。 下面的安裝過程均是在window平臺下安裝。 一、準備工作 1. 安裝node.js和npm Vue的腳手

基於vue cli 3.0建立前端專案安裝cube-ui

前提條件: 安裝node.js。 國內的開發者最好先配置淘寶映象。 之後用cnpm來代替npm命令。 專案建立過程: 開啟cmd,輸入命令進入目標工作空間,以本機專案為例: cd  /d  d: cd  D:\workplace 輸入全域性安裝vuecli的命令:c

使用 vue-cli 3 快速建立 Vue 專案專案配置 Vue.config.js

1.使用 npm install -g @vue/cli # or yarn global add @vue/cli 檢視版本(是否安裝成功):vue -V(大寫的V) 11576163-5ebc6d418467d0c4.png 2.命令變化 Comm

vue.js學習02之vue-cli腳手架建立專案環境搭建

從開發環境到釋出 http://www.jianshu.com/p/5ba253651c3b,這更詳細,更適合入門      轉載自 http://blog.csdn.net/gebitan505/article/details/56673302 &nb

基於Vue-cli 快速搭建專案

Vue-cli可以快速幫助我們建立一個專案,這是官方給我們提供的腳手架。下面我說一下vue-cli的使用方法。 一、準備工作   在使用vue-cli時,首先需要安裝nodejs,npm,其次需全域性安裝vue和vue-cli   1、nodejs和npm安裝方法詳見https://www.cnblog

VUE學習筆記(一)—安裝vue-cli建立專案

Github:https://github.com/sueRimn 1.cmd開啟控制檯進行建立專案 (1)全域性安裝腳手架 在命令列輸入:npm install vue-cli -g (2)初始化專案 繼續輸入:vue init webpack myvue(myvue是我取的專案名,

vueVue CLI 3建立專案

前提條件 ① 若你的計算機已經安裝了舊版本的vue-cli,你需要先解除安裝它。 npm uninstall vue-cli -g ② 解除安裝完舊版本之後,安裝新版本。(注:node.js版本要求8.9以上) npm install -g @vue/cli ③ 使用