2021 iThome 鐵人賽

DAY 16

Modern Web

我的Vue學習筆記系列第 16 篇

Day16-Vue CLI 環境設定與打包部屬

13th鐵人賽

hsiu753

團隊寫 code 需要講幹話

2021-10-01 21:24:31

5033 瀏覽

分享至

package.json專案與套件相依設定檔

在開啟專案時我們使用的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打包專案

專案完成時可以在終端機下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"
}

vue.config.js設定檔

需要調整webpack參數時可以建立vue.config.js檔案，位置就和package.json同一層。

在build時希望不要有雜湊值就可以在此檔案寫以下內容

module.exports = {
    filenameHashing: false,
}

開發時的跨網域存取proxy-devServer

開發專案的時候可能會遇到遠端呼叫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));
  },

Untitled

解決方法就是在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));
},

多頁式應用(MPA)入口設定

上述的範例都是單頁式(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這部分感覺還有很多設定，有時間的話也想在深入研究一下，今天就到這邊拉~