vue cli3 創建vw移動端適配項目

一直用rem做移動端的適配，其原理就是根據html的font-size爲100單位rem的大小，flexible的解決方案大致是根據設計稿的大小動態改變不同屏幕下html的font-size的值，得到一個設計稿和rem的轉化比例。具體實現可以看一下大漠老師的《使用Flexible實現手淘H5頁面的終端適配》這篇文章

之後在vw的兼容性得到解決，大漠老師又出了新的移動端適配方案並和vue cli2做了詳細的安裝步驟，具體請看原文章《如何在Vue項目中使用vw實現移動端適配》。

對於vue-cli3,官方對目錄的改動還是比較大的。

cli3的config和build目錄都不見了，讓我怎麼配置一些打包配置 

網上搜了一下需要在根路徑下建一個vue.config.js。基本配置設置如下

module.exports = {
    baseUrl: process.env.NODE_ENV === 'production'
        ? './'
        : '/',

    outputDir: '../dist',

    assetsDir: 'static',

    filenameHashing: true,

    // When building in multi-pages mode, the webpack config will contain different plugins
    // (there will be multiple instances of html-webpack-plugin and preload-webpack-plugin).
    // Make sure to run vue inspect if you are trying to modify the options for those plugins.
    pages: {
        index: {
            // entry for the pages
            entry: 'src/main.js',
            // the source template
            template: 'public/index.html',
            // output as dist/index.html
            filename: 'index.html',
            // when using title option,
            // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
            title: '首頁',
            // chunks to include on this pages, by default includes
            // extracted common chunks and vendor chunks.
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
        // when using the entry-only string format,
        // template is inferred to be `public/subpage.html`
        // and falls back to `public/index.html` if not found.
        // Output filename is inferred to be `subpage.html`.
        // subpage: ''
    },

    // eslint-loader 是否在保存的時候檢查
    lintOnSave: true,

    // 是否使用包含運行時編譯器的Vue核心的構建
    runtimeCompiler: false,

    // 默認情況下 babel-loader 忽略其中的所有文件 node_modules
    transpileDependencies: [],

    // 生產環境 sourceMap
    productionSourceMap: false,

    // cors 相關 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
    // corsUseCredentials: false,
    // webpack 配置，鍵值對象時會合並配置，爲方法時會改寫配置
    // https://cli.vuejs.org/guide/webpack.html#simple-configuration
    configureWebpack: (config) => {
    },

    // webpack 鏈接 API，用於生成和修改 webapck 配置
    // https://github.com/mozilla-neutrino/webpack-chain
    chainWebpack: (config) => {
        // 因爲是多頁面，所以取消 chunks，每個頁面只對應一個單獨的 JS / CSS
        config.optimization
            .splitChunks({
                cacheGroups: {}
            });

        // 'src/lib' 目錄下爲外部庫文件，不參與 eslint 檢測
        config.module
            .rule('eslint')
            .exclude
            .add('/Users/maybexia/Downloads/FE/community_built-in/src/lib')
            .end()
    },

    // 配置高於chainWebpack中關於 css loader 的配置
    css: {
        // 是否開啓支持 foo.module.css 樣式
        modules: false,

        // 是否使用 css 分離插件 ExtractTextPlugin，採用獨立樣式文件載入，不採用 <style> 方式內聯至 html 文件中
        extract: true,

        // 是否構建樣式地圖，false 將提高構建速度
        sourceMap: false,

        // css預設器配置項
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },

            postcss: {
                // options here will be passed to postcss-loader

            }
        }
    },

    // All options for webpack-dev-server are supported
    // https://webpack.js.org/configuration/dev-server/
    devServer: {
        open: true,

        host: '127.0.0.1',

        port: 3000,

        https: false,

        hotOnly: false,

        proxy: null,

        before: app => {
        }
    },
    // 構建時開啓多進程處理 babel 編譯
    parallel: require('os').cpus().length > 1,

    // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},

    // 第三方插件配置
    pluginOptions: {}
};

基本配置也就不說明，現在可以npm run serve 啓動項目了。

完成啓動接下來就是配置vw佈局了

1.安裝需要的插件（由於cli3的一些配置有過修改，npm 的庫也相應多了）

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano postcss-import postcss-url --S

2.在根路徑下的postcss.config.js配置如下

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,     // (Number) The width of the viewport.
      viewportHeight: 1334,    // (Number) The height of the viewport.
      unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'vw',     // (String) Expected units.
      selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
      mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
    },
    "postcss-viewport-units":{},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

3.啓動npm run serve會發現報 Cannot load preset "advanced". Please check your configuration for errors and try again錯

這是就需要在安裝一個cssnano-preset-advanced插件

npm i cssnano-preset-advanced --save-dev

 4.再次啓動，所有的css的px都變爲vw單位

5.引入兼容性方案

   ①引入viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js兩個js  https://github.com/rodneyrehm/viewport-units-buggyfill

  ②調用

<script>
    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
            hacks: window.viewportUnitsBuggyfillHacks
        });
    }
</script>

cli3的vw配置到此也就結束了。如果在項目中仍然需要使用px可以加class爲.ignore或.hairlines(.hairlines一般用於設置border-width:0.5px的元素中) 還有更多內容 還是看原文《如何在Vue項目中使用vw實現移動端適配》。

現在大漠老師的文章要收費了?，給你們個網友轉載的鏈接 https://www.jianshu.com/p/1f1b23f8348f