vuecli3 vant rem 移动端框架方案

摘要：描述基于适配方案封装，构建手机端模板脚手架帮你做好的配置有多环境开发封装适配方案生产环境优化首屏加速低版本浏览器兼容环境发布脚本可以上手直接写代码多环境开发之前写过一个多环境的方案，是基于的多环境配置方案传送门最近新的项目采用了开始了

基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架

帮你做好的配置有

vuecli3.0

多环境开发

axios封装

rem适配方案

生产环境cdn优化首屏加速

babel低版本浏览器兼容

环境发布脚本

...
可以上手直接写代码

之前写过一个多环境的方案，是基于vue-cli2.0的vue多环境配置方案-传送门
最近新的项目采用了vuecli3.0开始了一番折腾

这里参考了 vue-admin-template基本思路不变
在src的文件里新建config 根据不同的环境去引用不同的配置文件，不同的是在根目录下有三个设置环境变量的文件
这里可以参考vue-admin-template

这里要注意的是，要以VUE_APP_前缀设置，才可以在vue中引用

这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去config下新建三个对应的文件呢？
个人比较喜欢这种引入的方式而，比如我需要在文件引入api.common_api

import { api } from "@/config"
// api
const { common_api } = api

还是那句话，用vw还是用rem，这是个问题？

选用rem的原因是因为vant直接推荐了这个适配方案，拿来直接用

================2019.06.06 更新===========================

可以使用cdn提高速度，这里要在vue.config.js需要配置externals,修改public 下的index.html

vue.config.js

"use strict"
const path = require("path")
const defaultSettings = require("./src/config/index.js")
function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || "vue mobile template" // page title
const port = 9018 // dev port
const externals = {
  vue: "Vue",
  "vue-router": "VueRouter",
  vuex: "Vuex",
  vant: "vant",
  axios: "axios",
  "crypto-js": "CryptoJS"
}
// cdn
const cdn = {
  // 开发环境
  dev: {
    css: [],
    js: [
      "https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"
    ]
  },
  // 生产环境
  build: {
    css: ["https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css"],
    js: [
      "https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js",
      "https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js",
      "https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"
    ]
  }
}
module.exports = {
  publicPath: process.env.NODE_ENV === "development" ? "/" : "/app/", // 需要区分生产环境和开发环境，不然build会报错
  outputDir: "dist",
  assetsDir: "static",
  lintOnSave: process.env.NODE_ENV === "development",
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    }
  },

  configureWebpack: config => {
    // 为生产环境修改配置...
    if (process.env.NODE_ENV === "production") {
      // externals里的模块不打包
      Object.assign(config, {
        name: name,
        externals: externals
      })
    }
    // 为开发环境修改配置...
    if (process.env.NODE_ENV === "development") {
    }
  },
  chainWebpack(config) {
    config.plugins.delete("preload") // TODO: need test
    config.plugins.delete("prefetch") // TODO: need test
    // alias
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("views", resolve("src/views"))
      .set("components", resolve("src/components"))
    /**
     * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改
     */
    config.plugin("html").tap(args => {
      if (process.env.NODE_ENV === "production") {
        args[0].cdn = cdn.build
      }
      if (process.env.NODE_ENV === "development") {
        args[0].cdn = cdn.dev
      }
      return args
    })

    // set preserveWhitespace
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === "development", config =>
        config.devtool("cheap-source-map")
      )

    config.when(process.env.NODE_ENV !== "development", config => {
      config
        .plugin("ScriptExtHtmlWebpackPlugin")
        .after("html")
        .use("script-ext-html-webpack-plugin", [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /runtime..*.js$/
          }
        ])
        .end()
      config.optimization.splitChunks({
        chunks: "all",
        cacheGroups: {
          libs: {
            name: "chunk-libs",
            test: /[/]node_modules[/]/,
            priority: 10,
            chunks: "initial" // only package third parties that are initially dependent
          },
          // elementUI: {
          //   name: "chunk-elementUI", // split elementUI into a single package
          //   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          //   test: /[/]node_modules[/]_?element-ui(.*)/ // in order to adapt to cnpm
          // },
          commons: {
            name: "chunk-commons",
            test: resolve("src/components"), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
      config.optimization.runtimeChunk("single")
    })
  }
}

public/index.html

  
    
    
    
    
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
      
      
      <% } %>
    
  
  
    
    

    
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      
    <% } %>
    
  

因为babel研究的还不够透彻，所以采用了最笨的方法直接引入babel-polyfill,生产环境和开发环境都直接引用cdn js
babel.config.js 添加 useBuiltIns: "entry"

babel.config.js

module.exports = {
  presets: [["@vue/app", { useBuiltIns: "entry" }]],
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true
      },
      "vant"
    ]
  ]
}

因为项目刚刚构建起来，后面还会持续更新，实际使用过程中一定还有很多问题，如果文章中有错误希望能够被指正，一起成长

项目github地址

您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。

如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～

转载请联系作者！