pc 移動端 雙端切換

實現一個項目匹配多個端，使用vue.config自帶的page 實現多個頁面切換。官網介紹：https://cli.vuejs.org/zh/config/#pages

在創建的vue項目中找到 vue.config.js中 添加page

沒有就在根目錄下創建vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //多頁面配置
  pages: {
    // 多個頁面
    mobile: {
      // 模板來源
      template: 'public/mobile.html',
      // page 的入口
      entry: 'src/mobile.main.ts',
      // 在 dist/index.html 的輸出
      filename: 'mobile.html',
      // 頁面標題
      title: '移動適配',
    },
    index: {
      template: 'public/index.html',
      entry: 'src/main.ts',
      filename: 'index.html',
      title: 'pc適配',
    }
  },
})

分別在 public， router ，views ，src下添加修改文件

public 中複製一個html 修改名字為 mobile(可以更具需求自己修改)。

router 與 view 中創建2套路由文件，分別對應pc 與 mobile

找到src 文件下的 App.vue 與 main.ts 複製一套並改名 為 mobileApp.vue 與 mobile.main.ts

router 多端路由配置

index.ts 代碼

pc與mobile 下的index.ts 內容都一樣，只有component 對應的頁面地址 更具不同的端 ，對應不同的地址。

註：pc 與 mobile 內容，唯一要註意的是頁面地址 分別對應不同的路徑

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    //pc 或mobile 路徑
    component: () => import('@/views/PC/HomeView/HomeView.vue'),
    meta: {
      title: "首頁",
      //是否需要登錄
      requireAuth: false
    }
  }
]

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  //整合路由
  routes: routes,
})

/*
  前置 路由守衛
*/
/* eslint-disable */
router.beforeEach((to, from, next) => {
  /* -----通過本地緩存進行判斷,獲取指定key本地存儲的值進行判斷----- */
  if (to.meta.requireAuth) {
    // 獲取指定key本地存儲的值
    const token = localStorage.getItem('Authorization')
    if (token === null || token === '') {
      //登錄彈窗
      console.log("去登錄")
    } else {
      next()
    }
  } else {
    next()
  }
})
/* eslint-disable no-new */

/*
  後置 路由守衛
*/
router.afterEach((to: any) => {
  // console.log("後置 路由守衛", to, from)
  //更改每個頁面的標題
  document.title = to.meta.title;
})

export default router

Views 文件配置

在views 文件下分別創建 PC 與 Moblie 文件，對應為 pc端與移動端的頁面地址。

複製一套app.vue 與main.ts ,修改複製的名字為 mobileApp.vue 與 mobile.main.ts

app.vue 與 mobileApp.vue

<template>
  <router-view />
</template>

<style lang="scss">
</style>

main.ts 與 mobile.main.ts

import { createApp } from 'vue'
import App from './App.vue'
// main 導入 pc 端路由
import router from './router/pc/index'
// mobile.main 導入 mobile 端路由
// import router from './router/mobile/index'
import store from './store'
const app = createApp(App)

// 瀏覽器視口小於900px時，使用mobile路由
// 瀏覽器視口大於900px時，使用pc路由
import '@/utils/convert/autoSwitch'
import '@/utils/convert/rem'

app.use(store).use(router).mount('#app')

創建utils文件，在創建convert 文件

在convert文件內部創建：autoSwitch.ts ，functions.ts ，rem.ts

autoSwitch 根據頁面大小, 切換顯示的埠

import { debounce } from './functions'
window.addEventListener('resize', debounce(() => {
  if (document.documentElement.clientWidth < 900) {
    if (window.location.href === '/mobile.html#/') return
    window.location.href = './mobile.html#/'
  } else {
    if (window.location.href === '/index.html#/') return
    window.location.href = './index.html#/'
  }
}, 100))

rem 設置預設字體 等元素

import { debounce } from './functions'
function setRem() {
  // 320 預設大小16px; 320px = 20rem ;每個元素px基礎上/16
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
  // 得到html的Dom元素
  const htmlDom = document.getElementsByTagName('html')[0]
  // 設置根元素字體大小
  const clientWidth = document.documentElement.clientWidth
  // 1920設計稿一套樣式，750設計稿一套樣式
  htmlDom.style.fontSize = clientWidth < 900 ? htmlWidth / 46.875 + 'px' : htmlWidth / 120 + 'px'
}
// 初始化
setRem()
window.addEventListener('resize', debounce(setRem, 100))

functions 防抖與節流函數

註：註釋的為js版本使用的 ，沒註釋的為ts版本

// 防抖函數
type CallbackFn = (item?: any) => void
export function debounce(fn: CallbackFn, delay: number) {
  let timer: number | null = null;
  return (...args: any[]) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  }
}

// 節流函數
export function throttle(fn: CallbackFn, delay: number) {
  let timer: number | null = null;
  return (...args: any[]) => {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn(...args);
      timer = null
    }, delay);
  }
}

/* 
js 原始版本
// 防抖函數
export function debounce(fn, delay) {
  let timer = null
  return function () {
    const _this = this
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function () {
      fn.apply(_this, args)
    }, delay)
  }
}

// 節流函數
export function throttle(fn, delay) {
  let timer = null
  return function () {
    const _this = this
    const args = arguments
    if (timer) {
      return
    }
    timer = setTimeout(function () {
      fn.apply(_this, args)
      timer = null
    }, delay)
  }
}
*/

 運行路由展示

項目地址：https://github.com/jielov/doubleEnd-switch

本文來自博客園，作者：虛乄，轉載請註明原文鏈接：https://www.cnblogs.com/lovejielive/p/17610945.html