移动端适配配置

目前项目中一般使用rem来进行页面的适配，基本原理是利用rem跟随字体大小改变而改变从而实现了自适应的功能。html的字体是固定的，所以需要监听页面大小的变化，推荐使用淘宝的amfe-flexible插件。页面自行定义基准值或者利用postcss-pxtorem插件来进行自动转化。

1.安装依赖

npm i amfe-flexible -S

2.使用px2re配置px自动转rem

安装插件 npm i postcss-pxtorem -D
在package.json内，在postcss里添加下方配置。根据设计稿大小配置rootValue

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75, 		// 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）
        "propList":["*"] 		// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
     }
    }
  }

3.引入第三方UI框架

移动端UI库推荐使用有赞团队的vant。

（1）安装依赖

npm i vant -S

（2）按需加载组件

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
#安装插件 **npm i babel-plugin-import -D
// 在 babel.config.js 中配置

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  // 自动按需加载 vant
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        // 指定样式路径
        style: name => `${name}/style/less`
      },
      "vant"
    ]
  ]
};

在 main.js 中引入所需组件：

import {
  Toast,
  Icon,
} from "vant";
 
Vue.use(Toast)
  .use(Icon)

4.配置vue.config.js文件

vue cli3.0项目中需要配置其他参数时,需要新建文件’vue.config.js’,(文件名固定这么写),与package.json在同一级目录下。

（1）文件目录配置别名

我们可以把src配置为@，如果需要就不用到根目录开始写了，直接用@/xxx/进行引用。根据自己需要进行配置，在vue.config.js文件中加入代码。

 // 配置
chainWebpack: (config)=>{// 配置别名
config.resolve.alias
    .set('@', resolve('src'))
    .set('static',resolve('src/static'))
    }

（2）打包时自动生成压缩包

因最后发包为在丰声平台上传压缩包的方式，此处可配置自动生成压缩包。
安装依赖 npm i filemanager-webpack-plugin -D

const FileManagerPlugin = require("filemanager-webpack-plugin");
  configureWebpack: {
    plugins: [
      new FileManagerPlugin({
        //初始化 filemanager-webpack-plugin 插件实例
        onEnd: {
          delete: [
            //首先需要删除项目根目录下的dist.zip
            "./dist.zip",
            "./dist"
          ],
          mkdir: ["./www", "./dist"], //先创建两个空文件夹，不然第一次下面代码执行会报错
          copy: [
            { source: "./www", destination: "./dist/www" } //将生成的www移动复制到dist目录下的www
          ],
          archive: [
            //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
            { source: "./dist", destination: "./dist.zip" }
          ]
        }
      })
    ]
  }

（3）devServer配置

自定义端口号，如果需要设置跨域请求的，也可以在此进行配置。

 devServer: {
    port: 7007, // 启动端口
    proxy: { //允许跨域
    '/api': {
      target: 'http://127.0.0.1:8080',
      changeOrigin: true
      }
    }
  },

5.Index.html文件修改

移动端meta设置

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