在vue.config.js 中获取屏幕宽度

你可以使用 `process.env.VUE_APP_SCREEN_WIDTH` 来获取屏幕宽度。在 `vue.config.js` 中，你可以通过 `chainWebpack` 方法来进行配置，示例如下：

module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0]['process.env']['VUE_APP_SCREEN_WIDTH'] = window.innerWidth
      return args
    })
  }
}

这里使用 `window.innerWidth` 来获取屏幕宽度，并将其赋值给 `process.env.VUE_APP_SCREEN_WIDTH`。请注意，这里使用的是 `VUE_APP_SCREEN_WIDTH` 而不是 `SCREEN_WIDTH`，因为在 Vue CLI 3 中，只有以 `VUE_APP_` 开头的环境变量才能被 webpack.DefinePlugin 静态插入到客户端代码中。

相关问题

postcss-px-to-viewport 在vue.config.js中怎么配置

你可以在vue.config.js文件中配置postcss-px-to-viewport插件来将px单位转换为vw或者vh单位。首先，确保你已经安装了postcss-px-to-viewport插件。

然后，在vue.config.js文件中添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            viewportWidth: 750,  // 视窗的宽度，对应设计稿宽度
            viewportHeight: 1334, // 视窗的高度，对应设计稿高度
            unitPrecision: 3,     // 指定px转换为视窗单位值的小数位数
            viewportUnit: 'vw',   // 指定需要转换成的视窗单位，vw或者vh
            selectorBlackList: ['.ignore', '.hairlines'],  // 指定不需要转换的类
            minPixelValue: 1,     // 小于或等于1px不转换为视窗单位
            mediaQuery: false     // 允许在媒体查询中转换px
          })
        ]
      }
    }
  }
};

在以上代码中，你可以根据你的设计稿的宽度和高度来设置`viewportWidth`和`viewportHeight`的值。你还可以根据需要调整其他配置项，如`unitPrecision`、`viewportUnit`等。

配置完成后，重新运行你的Vue项目，postcss-px-to-viewport插件会自动将样式文件中的px单位转换为vw或者vh单位。

vue3 在vue.config.js配置postcss-px-to-viewport

好的，针对你的问题，我可以为你提供如下的解答：

在 Vue3 中使用 postcss-px-to-viewport 进行适配的话，你需要先安装 postcss-px-to-viewport 插件以及 postcss-loader 加载器。安装命令如下：

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

安装完成后，你需要在项目根目录下新建一个 postcss.config.js 文件，并在其中进行如下配置：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 750,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    }
  }
}

其中，各个配置项的含义如下：

- `unitToConvert`: 要转换的单位，默认是 `px`。
- `viewportWidth`: 视口的宽度，对应设计稿的宽度。
- `unitPrecision`: 转换后的小数点位数。
- `propList`: 要转换的 CSS 属性（* 表示所有属性）。
- `viewportUnit`: 转换后的视口单位。
- `fontViewportUnit`: 转换后的字体视口单位。
- `selectorBlackList`: 需要忽略的 CSS 选择器，例如 `['.ignore', '.hairlines']`。
- `minPixelValue`: 小于等于这个值的单位不转换。
- `mediaQuery`: 是否在媒体查询中转换单位。
- `replace`: 是否直接替换掉源文件中的单位，而不是添加备用单位。
- `exclude`: 要忽略的文件，可以使用正则表达式。

最后，在 vue.config.js 中添加如下配置即可：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            unitToConvert: 'px',
            viewportWidth: 750,
            unitPrecision: 5,
            propList: ['*'],
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: /(\/|\\)(node_modules)(\/|\\)/
          })
        ]
      }
    }
  }
}

这样就完成了在 Vue3 中使用 postcss-px-to-viewport 进行适配的配置。希望能够对你有所帮助。