vue cli3 创建vw移动端适配项目

最新推荐文章于 2024-11-07 15:50:10 发布

黄治文个人博客

最新推荐文章于 2024-11-07 15:50:10 发布

阅读量3.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 2.0 css3 文章标签： vuecli3 vw布局

本文链接：https://blog.youkuaiyun.com/qq_34690340/article/details/90605591

一直用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: {