vuecli3 vant rem 移動端框架方案

since1986 發(fā)布于2019-08-26 13:54 / 2340人閱讀

摘要：描述基于適配方案封裝，構(gòu)建手機端模板腳手架幫你做好的配置有多環(huán)境開發(fā)封裝適配方案生產(chǎn)環(huán)境優(yōu)化首屏加速低版本瀏覽器兼容環(huán)境發(fā)布腳本可以上手直接寫代碼多環(huán)境開發(fā)之前寫過一個多環(huán)境的方案，是基于的多環(huán)境配置方案傳送門最近新的項目采用了開始了

描述

基于vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios封裝，構(gòu)建手機端模板腳手架

幫你做好的配置有

vuecli3.0

多環(huán)境開發(fā)

axios封裝

rem適配方案

生產(chǎn)環(huán)境cdn優(yōu)化首屏加速

babel低版本瀏覽器兼容

環(huán)境發(fā)布腳本

...
可以上手直接寫代碼

多環(huán)境開發(fā)

之前寫過一個多環(huán)境的方案，是基于vue-cli2.0的vue多環(huán)境配置方案-傳送門
最近新的項目采用了vuecli3.0開始了一番折騰

這里參考了 vue-admin-template基本思路不變
在src的文件里新建config 根據(jù)不同的環(huán)境去引用不同的配置文件，不同的是在根目錄下有三個設(shè)置環(huán)境變量的文件
這里可以參考vue-admin-template

這里要注意的是，要以VUE_APP_前綴設(shè)置，才可以在vue中引用

這里有個問題，既然這里有了根據(jù)不同環(huán)境設(shè)置變量的文件，為什么還要去config下新建三個對應(yīng)的文件呢？
個人比較喜歡這種引入的方式而，比如我需要在文件引入api.common_api

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

rem適配方案

還是那句話，用vw還是用rem，這是個問題？

選用rem的原因是因為vant直接推薦了這個適配方案，拿來直接用

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

生產(chǎn)環(huán)境使用CDN

可以使用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 = {
  // 開發(fā)環(huán)境
  dev: {
    css: [],
    js: [
      "https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"
    ]
  },
  // 生產(chǎn)環(huán)境
  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/", // 需要區(qū)分生產(chǎn)環(huán)境和開發(fā)環(huán)境，不然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 => {
    // 為生產(chǎn)環(huán)境修改配置...
    if (process.env.NODE_ENV === "production") {
      // externals里的模塊不打包
      Object.assign(config, {
        name: name,
        externals: externals
      })
    }
    // 為開發(fā)環(huán)境修改配置...
    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參數(shù)到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) { %>
      
      
      <% } %>
    <%= webpackConfig.name %>
  
  
    
    
    
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      
    <% } %>

babel轉(zhuǎn) ES5

因為babel研究的還不夠透徹，所以采用了最笨的方法直接引入babel-polyfill,生產(chǎn)環(huán)境和開發(fā)環(huán)境都直接引用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"
    ]
  ]
}

總結(jié)

因為項目剛剛構(gòu)建起來，后面還會持續(xù)更新，實際使用過程中一定還有很多問題，如果文章中有錯誤希望能夠被指正，一起成長

項目github地址

關(guān)于我

您可以掃描添加下方的微信并備注 Sol 加交流群，給我提意見，交流學(xué)習(xí)。

如果對你有幫助送我一顆小星星（づ￣3￣）づ╭?～

轉(zhuǎn)載請聯(lián)系作者！

云服務(wù)器 GPU云服務(wù)器移動端框架移動端web前端框架移動端適配方案后端框架

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109794.html

發(fā)表評論

登陸后可評論

0條評論

since1986

男|高級講師

我要關(guān)注我要私信

TA的文章

騰訊云：優(yōu)惠，爆款1核2G云服務(wù)器首年74元，可選機房，北京/廣州/成都/上海/重慶/中國香港/新加

閱讀 3548·2021-08-31 09:39
用CSS畫簡單圖標(biāo)

閱讀 1854·2019-08-30 13:14
關(guān)于字體大小px與rem混用的個人經(jīng)驗

閱讀 2918·2019-08-30 13:02
CSS3 實現(xiàn)多個動畫效果

閱讀 2769·2019-08-29 13:22
vuecli3 vant rem 移動端框架方案

閱讀 2341·2019-08-26 13:54
小程序圖片上傳 wx.uploadFile 后臺java PHP兩個版本

閱讀 766·2019-08-26 13:45
cocos creator 事件

閱讀 1586·2019-08-26 11:00
JavaScript之柯里化

閱讀 982·2019-08-26 10:58

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vuecli3 vant rem 移動端框架方案

相關(guān)文章

【開源】小程序And公眾號商城，外加后臺，功能齊全！

【開源】小程序And公眾號商城，外加后臺，功能齊全！

關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

發(fā)表評論

0條評論

since1986

男|高級講師

TA的文章

騰訊云：優(yōu)惠，爆款1核2G云服務(wù)器首年74元，可選機房，北京/廣州/成都/上海/重慶/中國香港/新加

用CSS畫簡單圖標(biāo)

關(guān)于字體大小px與rem混用的個人經(jīng)驗

CSS3 實現(xiàn)多個動畫效果

vuecli3 vant rem 移動端框架方案

小程序圖片上傳 wx.uploadFile 后臺java PHP兩個版本

cocos creator 事件

JavaScript之柯里化

最新活動