- 首先修改 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 }) }) } <!--此为修改过的源码 ->
- 重新编译运行即可
vue如何适配移动端
最新推荐文章于 2025-06-25 09:08:29 发布