vue如何适配移动端

最新推荐文章于 2025-06-25 09:08:29 发布

原创最新推荐文章于 2025-06-25 09:08:29 发布 · 708 阅读

1 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

7 篇文章

订阅专栏

博客介绍了Vue项目适配的相关步骤，包括修改首页index.html文件，下载lib - flexible并在main.js中引入，安装px2rem - loader，将其添加到build文件中util.js的cssLoaders里，最后重新编译运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先修改 vue项目首页 index.html 文件中：
在这里插入图片描述

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

下载lib-flexible：
```
npm i lib-flexible
```
在main.js 文件中引入：
```
import 'lib-flexible/flexible'
```
安装px2rem-loader
```
npm install px2rem-loader
```

找到build文件中util.js，将px2rem-loader添加到cssLoaders中：

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',    //此为适配移动端新增
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 25
     }

  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, px2remLoader] : [cssLoader,px2remLoader]  //使用新增设置

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    <!--此为修改过的源码 ->