vue移动端开发h5基础配置

移动端项目中开发基础配置

简介：仅针对于vue项目基础配置，但也适用于类似框架

1. vue项目搭建

• 项目初始化

1. vue2.0
   vue init webpack <项目名称>
   基础配置依据个人爱好，这里直接省略
2. vue3.0
   vue create <项目名称>
   基础配置同样省略
   vue3.0需要在根目录创建vue.config.js
   这里有一篇关于vue-cli3的全面配置的文章供大家参考，https://segmentfault.com/a/1190000017008697

  	module.exports = {
          baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
          outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
          assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
          indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
          pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
            index: {//除了 entry 之外都是可选的
              entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
              template: 'public/index.html',// 模板来源
              filename: 'index.html',// 在 dist/index.html 的输出
              title: 'Index Page',// 当使用 title 选项时,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
              chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
            },
            subpage: 'src/subpage/main.js'//官方解释：当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'
          },
          lintOnSave: true,// 是否在保存的时候检查
          productionSourceMap: true,// 生产环境是否生成 sourceMap 文件
          css: {
            extract: true,// 是否使用css分离插件 ExtractTextPlugin
            sourceMap: false,// 开启 CSS source maps
            loaderOptions: {},// css预设器配置项
            modules: false// 启用 CSS modules for all css / pre-processor files.
          },
          devServer: {// 环境配置
            host: 'localhost',
            port: 8080,
            https: false,
            hotOnly: false,
            open: true, //配置自动启动浏览器
            proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
              '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
              },
              '/foo': {
                target: '<other_url>'
              }
            }
          },
          pluginOptions: {// 第三方插件配置
            // ...
          }
      }; ```
      

• Rem配置，px自动转化rem

• 首先下载 lib-flexible
  npm install lib-flexible --save

• 在main.js(vue3.0+ts应该在main.ts)中引入
  import 'lib-flexible'

• 安装 px2rem-loader(px转rem关键)
  npm install px2rem-loader

• 在build/utils.js中配置px2rem

	const cssLoader = {
    	loader: 'css-loader',
    	options: {
      		sourceMap: options.sourceMap
    	} 
    } 
    //添加这段代码
    const px2remLoader = {
    	loader: 'px2rem-loader',
    	option: {
      		remUnit: 75 // 设计图宽度÷10
    	} 
    }   
    //
    const postcssLoader = {
    	loader: 'postcss-loader',
    	options: {
      	sourceMap: options.sourceMap
    	}   
 	} 
    ```

★ ★ ★ ★ ★
若使用了类似于Vant框架，想把框架样式也转化为rem需要增加配置，不懂可参考点击此处
Rem 适配
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值
PostCSS 配置
下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

module.exports = {   plugins: {
     autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'], 
      },
     'postcss-pxtorem': {
      rootValue: 37.5,
       propList: ['*'], 
      },     
    },  
  }; 

★ ★ ★ ★ ★

待续–