# vue-cli基本環境建置

## public資料夾

### **favicon.ico**
為網頁圖示，會顯示在網頁標題前
### **index.html**
應用程序的主 HTML 文件
- 設置專案的meta屬性
- 設置網頁標題
- 設置網站字體
### .htaccess
在無法更動server環境設置的前提下，手動建立一個 .htaccess 檔案
- Apache Web 伺服器的設定檔案。它通常位於網站的根目錄下，並用於配置伺服器的行為和規則。
- 解決build檔案後，重整頁面空白的問題
- [參考網址](https://gist.github.com/Prezens/f99fd28124b5557eb16816229391afee)
:::spoiler .htaccess檔案的設置

<IfModule mod_rewrite.c>
    <!-- yourPath：請設置為實際URL網域後的路徑名稱 -->
    RewriteEngine On
    RewriteBase yourPath
    RewriteRule ^yourPath/index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . yourPath/index.html [L]
</IfModule>

:::
:::spoiler 範例檔案
範例的網址：https://tibamef2e.com/tgd104/g2/

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /tgd104/g2/
    RewriteRule ^/tgd104/g2/index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /tgd104/g2/index.html [L]
</IfModule>

:::

## src/assets資料夾
存放靜態資源文件的資料夾
- JavaScript
- CSS
- SCSS
- Data
- img
- audio(影音)

## src/components
存放vue組件的資料夾
## src/router/index.js
Vue Router的配置文件
:::spoiler 簡易配置

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../App.vue'
const routes = [
  /*
   * path: URL網域後的路徑名稱
   * name: 給路由配置得名稱，通過$router.push()或$router.replace()方法時，可以使用路由名稱來指定目標路由
   * component: component属性用于指定路由對應的組件
  */
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/index',
    name: 'index',
    component: () => import(/* webpackChunkName: "about" */ '../views/IndexView.vue')
  },
  {
    path: '/b_login',
    name: 'b_login',
    component: () => import(/* webpackChunkName: "about" */ '../views/b_login.vue')
  },
  {
    path: '/b_index',
    name: 'b_index',
    component: () => import(/* webpackChunkName: "about" */ '../views/b_index.vue')
  },
  {
    path: '/b_data',
    name: 'b_data',
    component: () => import(/* webpackChunkName: "about" */ '../views/b_data.vue')
  },
  {
    path: '/b_updata',
    name: 'b_updata',
    component: () => import(/* webpackChunkName: "about" */ '../views/b_updata.vue')
  },
  {
    path: '/b_settingAccount',
    name: 'b_settingAccount',
    component: () => import(/* webpackChunkName: "about" */ '../views/b_settingAccount.vue')
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// 通過router.beforeEach可以在每次路由切换之前，進行一些邏輯處理
router.beforeEach((to, from, next) => {
    // 讀取 sessionStorage
    const currentStaff = JSON.parse(sessionStorage.getItem('staff')) || {};
    // 檢查 登入的帳號是否為 後台帳號
    const accountTypeId =  currentStaff.account_type_id;
    if ((to.path === '/b_login')) {
        if(currentStaff && (accountTypeId == 2 || accountTypeId == 3)){
            // 若已登入則會跳轉回前後台登入頁面
            next('/');
        } else {
            //若未登如則可以進入後台登入頁面
            next();

        }
    } else if (to.path === '/b_index' || to.path === '/b_data' || to.path === '/b_updata' || to.path === '/b_settingAccount') {
        if(!currentStaff || (accountTypeId != 2 && accountTypeId != 3)){
            // 偵測用戶是否登入後台帳號否的會則會跳轉到登入頁面
            next('/b_login');
        } else {
            //若已登入則會繼續進入下個頁面
            next()
        }
    } else {
        // 以上條件都不符合則繼續造轉至下一頁面
        next()
    }
});

export default router

:::

## src/views
存放各頁面vue檔案的資料夾

## src/main.js
應用程式的進入點檔案。它是整個Vue應用程式的起點，負責初始化Vue實例、載入插件和設定，以及掛載根組件。

## src/config.js
自行建立的一個檔案，用來儲存node.js的全局變量
:::spoiler 範例檔案

// 本地端開發
export const API_URL = process.env.VUE_APP_API_URL || 'http://localhost/TGD104_G2/frontend/src/api/'

// Server端上線
// export const API_URL = process.env.VUE_APP_API_URL || '/tgd104/g2/api/'

:::

## vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    // 增加publicPath屬性設置，指定在服务器上的基本URL路徑。
    // 以下的寫法會判斷是否在開發環境下，在開發環境下的URL路徑及為'/'，反之則是 URL網域後的路徑名稱
    publicPath: process.env.NODE_ENV === "production" ? "URL網域後的路徑名稱" : "/",
})

###### 持續更新中！
###### 以上為自學中的筆記如有錯誤，懇請留言指正，感謝！