vue2使用postcss-px-to-viewport

Vue 2 中使用 `postcss-px-to-viewport` 是为了处理响应式设计中的像素单位转换，特别是在移动设备上。`postcss-px-to-viewport` 插件允许你在 CSS 中使用相对单位如 `vw` 和 `vh`，并将像素值（px）自动转换为视口宽度和高度的百分比，这样可以使得布局更适应不同屏幕尺寸。

在 Vue 项目中集成这个插件的一般步骤如下：

1. 安装依赖：首先通过 npm 或 yarn 添加 `postcss`, `postcss-loader`, 和 `autoprefixer` 等依赖，以及 `postcss-px-to-viewport`。命令如下：

   npm install postcss autoprefixer postcss-loader cssnano postcss-px-to-viewport --save-dev

2. 配置 loader：在你的 webpack.config.js 或 vue.config.js 文件中，添加 PostCSS 的配置，并启用 `postcss-px-to-viewport` 插件。例如：

   module.exports = {
     //...
     module: {
       rules: [
         {
           test: /\.vue$/,
           use: ['style-loader', 'css-loader', 'postcss-loader'],
         },
         //...
       ],
     },
     plugins: [
       require('autoprefixer'),
       require('postcss-px-to-viewport')({
         unitToConvert: 'px',
         viewportWidth: 750, // 或者你可以根据实际需要设置视口宽度
         landscape: true, // 如果需要考虑横屏模式
         designWidth: 375, // 设计稿宽度
         fontScale: 1,
         exclude: ['ionic'] // 可选，排除某些库的样式不转换
       }),
     ]
   };

3. 在 .vue 文件的 `<style>` 标签里，继续编写使用 `px` 单位的样式。