在vue.config.js 中获取屏幕宽度
时间: 2023-08-24 15:41:56 浏览: 122
你可以使用 `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文件中添加以下代码:
```javascript
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 文件,并在其中进行如下配置:
```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 中添加如下配置即可:
```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 进行适配的配置。希望能够对你有所帮助。
阅读全文
相关推荐













