[JavaScript知识库]下载rem依赖包，解决移动端适配问标题

webpack-vue-mobile

第一步

1.创建vue项目
	vue create '项目名称'
	
2.运行项目
	npm run dev
	
3.配置vue.config.js

4.下载第三方依赖包，进行rem布局
	npm install lib-flexible postcss-px2rem -S
	
	在main.js中导入rem的js
	import 'lib-flexible'
	
	在vue.config.js中配置
	css: {
	  loaderOptions: {
	    css: {
	      // 这里的选项会传递给 css-loader
	    },
	    postcss: {
	      // 这里的选项会传递给 postcss-loader
	      plugins: [
	        require('postcss-px2rem')({
	          // 适配375屏幕，设计图750中量出来的尺寸要 / 2
	          // 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库
	          remUnit: 37.5
	        })
	      ]
	    }
	  }
	}
	

vue.config.js

const port = process.env.port

module.exports = {
  devServer: {
    port: port,
    compress: true,
    open: true// 运行时自动打开浏览器
  },
  css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
        plugins: [
          require('postcss-px2rem')({
            // 适配375屏幕，设计图750中量出来的尺寸要 / 2
            // 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库
            remUnit: 37.5
          })
        ]
      }
    }
  }
}