vue-cli脚手架无build文件夹配置移动端自适应

1.终端安装相关组件

npm i lib-flexible --save
npm install px2rem-loader

2.在main.js中引入组件

import 'lib-flexible/flexible'

查看public里面的index.html，应该有下面的代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3.在根目录新建vue.config.js并输入以下代码

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
          .loader('px2rem-loader')
          .options({
            remUnit: 75//设计稿的宽度的1/10
          })
  }
}

注意.options里的remUnit这是设计稿的宽度，同时也是最大支持的宽度。比如现在设置的是75，那么当设备宽度超过750px的时候，自适应效果将会失效。
所以这个方法一般在移动端网页上使用。