在開啟專案時我們使用的npm run serve
指令就是在package.json
中被定義的,打開package.json
可以看到以下內容
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
其中的vue-cli-service
可以在./node_modules/.bin/
中找到,在這個檔案中可以省略這段路徑。
專案完成時可以在終端機下build
指令,把.vue檔案轉譯成瀏覽器讀的.js檔案
npm run build
完成後就會發現資料夾多了一個dist資料夾
DONE Compiled successfully in 39372ms 下午6:35:57
File Size Gzipped
dist\js\chunk-vendors.cfd96c1f.js 86.10 KiB 32.23 KiB
dist\js\app.30e28c5b.js 4.63 KiB 1.65 KiB
dist\css\app.f945facf.css 0.36 KiB 0.24 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
被打包的檔案名稱後面都有加上雜湊值,就像是app.30e28c5b.js
在以下這個區域中可以看到專案中所使用的套件,有了這個設定的地方,在團隊版本控制上就方便許多。
dependencies
: 打包build時一起包裝進去,並發布到線上環境devDependencies
: 僅於開發階段,不會被打包~
符號 : 找目前最小版本號安裝^
符號 : 找最新的中版本號安裝"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
}
需要調整webpack參數時可以建立vue.config.js檔案,位置就和package.json同一層。
在build時希望不要有雜湊值就可以在此檔案寫以下內容
module.exports = {
filenameHashing: false,
}
開發專案的時候可能會遇到遠端呼叫API跨域限制,proxy-devServer
就派上用場了!
和書中一樣用uBike資料作範例(https://data.ntpc.gov.tw/api/datasets/71CD1490-A2DF-4198-BEF1-318479775E8A/json/preview)
在元件中使用fetch
取得遠端資料,因為網域不同的限制,會顯示錯誤訊息
mounted() {
fetch("https://data.ntpc.gov.twapi/datasets/71CD1490-A2DF-4198-BEF1-318479775E8A/json/preview")
.then((res) => res.json())
.then((text) => console.log(text));
},
解決方法就是在vue.config.js設定proxy
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://data.ntpc.gov.tw/api/', //遠端路徑
pathRewrite: { '^/api': '' },
changeOrigin: true,
ws: true
},
}
}
}
指定好路徑之後就可以將fetch中的路徑改為相對路徑,如此一來就可以抓到遠端的資料了
mounted() {
fetch("api/datasets/71CD1490-A2DF-4198-BEF1-318479775E8A/json/preview")
.then((res) => res.json())
.then((text) => console.log(text));
},
上述的範例都是單頁式(SPA)為主,那多頁式(MPA)呢? 多頁式也就代表著多個進入點,此時就要把原先的入口做點變化
src/
之下建立一個pages
資料夾,新增list.html
和product.html
檔案,並在src/
中新增list.js
和product.js
list.js
和product.js
的內容和main.js差不多,mounted的目標可自行更動import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#list-app')
list.html
放入對應的節點<div id="list-app">list</div>
vue.config.js
module.exports = {
pages: {
list:
{
entry: `./src/list.js`, //頁面入口,啟動Vue.createApp的檔案位置
template: `./src/pages/list.html`, //網頁所在路徑
filename: `/list.html` //build時存放的位置
},
product:
{
entry: `./src/product.js`,
template: `./src/pages/product.html`,
filename: `/product.html`
}
}
}
src/
中list.html
和product.html
到public/
之下build
就可以從http://localhost:8081/list.html
看到畫面補充:
不想一頁頁設定的話可以用以下方式
//書中所提供
const path = require('path');
const glob = require('glob');
const resolve = dir => path.join(__dirname, dir);
const getPagesEntry = () => {
const entry = {};
// 搜尋專案內 /src/pages/ 所有的 HTML 檔案
const fileNameArr = glob
.sync(path.join(__dirname, './src/pages/**/*.html'))
.map(p => p.split('/src/pages/')[1])
.map(p => p.replace('.html', ''));
// 建立 pages 物件內容,存放到 entry 物件內
fileNameArr.forEach(e => {
entry[e] = {
entry: `./src/${e}.js`,
template: `./src/pages/${e}.html`,
filename: `${e}.html`,
};
});
return entry;
};
// 最後將 getPagesEntry() 的結果回傳給 page // 就可以取得所有檔案的路徑了
module.exports = {
pages: getPagesEntry()
}
Vue中想加入第三方函式庫時可以透過npm安裝(例如jQuery)
npm install jquery
完成後就可以看到package.json
多了jquery
"dependencies": {
"core-js": "^3.6.5",
"jquery": "^3.6.0",
"vue": "^3.0.0"
},
在App.vue中引入
<script>
import HelloWorld from "./components/HelloWorld.vue";
import $ from "jquery";
export default {
name: "App",
components: {
HelloWorld,
},
mounted() {
console.log($("img").attr("src"));
},
};
</script>
build
後dependencies
中的jQuery
也會被打包進去,讓檔案變很大
File Size Gzipped
dist\js\chunk-vendors.63013dfb.js 174.62 KiB 62.29 KiB
dist\js\app.fa51fa3c.js 4.70 KiB 1.69 KiB
dist\css\app.39958ea0.css 0.36 KiB 0.24 KiB
可以改用外部引入讓檔案大小減少
改用cdn方式在public/index.html
中放入
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
另外在vue.config.js
加入externals
設定
module.exports = {
configureWebpack: {
externals: { 'jquery': '$' }
}
}
這樣就大幅的縮減檔案大小了
File Size Gzipped
dist\js\chunk-vendors.cfd96c1f.js 86.10 KiB 32.23 KiB
dist\js\app.e9b913ec.js 4.73 KiB 1.70 KiB
dist\css\app.39958ea0.css 0.36 KiB 0.24 KiB
CLI章節到此結束,其實看完書後大概懂了一點概念,筆記的過程中邊跟著書中做,可是好幾次出現錯誤卡了好久,不知道什麼時候用npm run serve
還是npm run build
,現在可能也是半懂,之後實際做案子應該會有更深入的了解吧!! 另外,vue.config.js
這部分感覺還有很多設定,有時間的話也想在深入研究一下,今天就到這邊拉~