web H5 vue3 vite 移动应用记录

• 动态修改 rem 的值 ，适应不同的屏幕

 let deviceWidth = document.documentElement.clientWidth || window.innerWidth;
            document.getElementsByTagName("html")[0].style.fontSize = (deviceWidth / 375) * 100 + "px";

需要写到index.html script 或 main.js 里。

• 完善修改rem适用浏览器窗口变化

放到 main.js 里

const baseSize = 100 // 这个是设计稿中1rem的大小。
function setRem() {
    //设备宽度
    let deviceWidth = document.documentElement.clientWidth || window.innerWidth;
    // 实际设备页面宽度和设计稿的比值
    const scale = deviceWidth / 375;
    // 计算实际的rem值并赋予给html的font-size
    document.documentElement.style.fontSize = (baseSize * scale) + 'px'
}
setRem()
window.addEventListener('resize', () => {
    setRem()
})

main.js 完整代码

import './assets/main.css'
// 全局引入css通用样式
import '@/assets/styles/common.css'
import '@/assets/styles/border.css'
// import 'amfe-flexible'

// import 'amfe-flexible'
import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

const baseSize = 100 // 这个是设计稿中1rem的大小。
function setRem() {
    //设备宽度
    let deviceWidth = document.documentElement.clientWidth || window.innerWidth;
    // 实际设备页面宽度和设计稿的比值
    const scale = deviceWidth / 375;
    // 计算实际的rem值并赋予给html的font-size
    document.documentElement.style.fontSize = (baseSize * scale) + 'px'
}
setRem()
window.addEventListener('resize', () => {
    setRem()
})

• overflow: hidden; 超出的部分 隐藏。

• 运行 npm run dev

• 预览 npm run preview

• 打包

打包前设置路径，假如路径是travel,需要在vite.config.js 里添加设置 base:'travel'

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 defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)) //可以创建别名路径
    }
  },
  base:'travel'
})

打包命令 npm run build后会生成dist的文件夹，就是需要上传的内容