nextjs 14 实现i18n 国际化-CFANZ编程社区

postcss-px2rem

postcss-px2rem 就是为了让我们直接在将代码中 px 自动转化成对应的 rem 的一个插件 (rem 是 root em 的缩写，rem 不是相对于当前元素，而是相对于根元素，所以，不论什么位置，使用 rem 单位都是相对于根元素的 font-size)

安装以下插件

npm install postcss-px2rem -D
npm install px2rem-loader -D

在 vue.config.js 文件中配置

module.exports = {
...,
chainWebpack: (config) => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 16 
      })
  },
}

这样配置之后只是对 css 起作用，并不能对 sass、scss、less 等预处理语言进行处理，所以我们需要另外一个插件 postcs-plugin-px2rem

postcs-plugin-px2rem

安装
```
npm install postcss-plugin-px2rem -D
```

在 vue.config.js 文件中配置

module.exports = {
...,
css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue: 16, // 换算基数
              // unitPrecision: 5, //允许REM单位增长到的十进制数字。
              // propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
              // propBlackList: [], //黑名单
              exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
              // selectorBlackList: [], //要忽略并保留为px的选择器
              // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
              // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
              mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
              minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
            })
          ]
        }
      }
    }
  },
}

设置根元素 font-size

在 src/utils 文件夹中新建文件 rem.js 根据浏览器的宽度来设置根元素的 font-size

import _ from 'lodash' // Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
export const setRem = () => {
  // 当前页面屏幕分辨率相对于 1440宽的缩放比例，可根据自己需要修改
  console.log(document.documentElement.clientWidth)
  const scale = document.documentElement.clientWidth / 1440
  // 设置页面根节点字体大小（“Math.min(scale, 3)” 指最高放大比例为3，可根据实际业务需求调整）
  document.getElementsByTagName('html')[0].style['font-size'] = `${baseSize * Math.min(scale, 1.5)}px`
}

// 创建一个 debounced（防抖动）函数
const setDomFontSizeDebounce = _.debounce(setRem, 400)
window.addEventListener('resize', setDomFontSizeDebounce)

在 main.js 文件中引入 setRem 方法并使用
```
import { setRem } from '@/utils/rem'
setRem()
```

@别名

vue 项目中当组件多的时候，以../ 的形式引入文件就会特别麻烦，所以设置 alias 别名的方式

moudle.exports = {
	configureWebpack: {
    	resolve: {
      		alias: {
        		'@': path.resolve('src') // 配置src为根目录
      		}
    	},
	}	
}