跳至主要内容

[Vue Router] Bootstrap及gh-pages

TL;DR​

介紹如何在Vite vue環境下加上目前市佔率最高的CSS框架-Bootsrap。

並且加上gh-pages自動調整發布的分支。

參考資料​

相關連結​

加入Bootstrap樣式​

npm install​

npm install bootstrap @popperjs/core  --save
npm install sass --save-dev

main.scss​

在src的assets下創建一個main.scss

./src/assets/main.scss
@import "bootstrap/scss/mixins/banner";
@include bsBanner("");


// scss-docs-start import-stack
// Configuration
@import "bootstrap/scss/functions";
@import "./variables";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Layout & components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/accordion";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
@import "bootstrap/scss/offcanvas";
@import "bootstrap/scss/placeholders";

// Helpers
@import "bootstrap/scss/helpers";

// Utilities
@import "bootstrap/scss/utilities/api";
// scss-docs-end import-stack
main.scss

原本在main.js中所關聯的CSS檔案為main.css

為了調整Bootstrap的客製化設定，我們在這邊創建一個scss檔案

並且在裡面加上bootstrap所有會載入的scss(路徑需要調整到對應node_modules內的檔案)

最後再創建自己的_variables檔案(內容與bootstrap的相同，只調整需要覆蓋的部分)，覆蓋掉bootstrap預設的設定。

main.js​

將原本import main.css的位置修改成import main.scss：

main.js
import './assets/main.scss'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

設定gh-pages​

npm install​

npm install gh-pages

vite.config.js​

需要調整發布的路徑，這邊需要根據在github上所設定的專案名稱來調整：

vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default ({ command }) => {
  const base = command === 'build' ? '/GithubRepoName/' : '/'

  return defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    base
  })
}

根據command設定輸出的Base

因為在使用npm run build的時候，會將該專案透過gh-pages推送到github上

透過gh-pages所生成的路徑，規則如下：https://githubUserName.github.io/githubRepoName/

所以網域後方會接著githubRepoName。

這時候就需要調整我們輸出dist資料夾時參照的路徑！！

如果今天是還會再上傳到vercel上等平台託管，就不需要在輸出路徑後方接上Repo名稱

設定Script​

接著到package.json中，設定要發布用的指令：

{
  "name": "vite-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "deploy": "vite build && gh-pages -d dist"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.2",
    "gh-pages": "^6.1.0",
    "pinia": "^2.1.7",
    "vue": "^3.3.10",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^4.5.1",
    "@vue/eslint-config-prettier": "^8.0.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "prettier": "^3.0.3",
    "sass": "^1.69.5",
    "vite": "^5.0.5"
  }
}