金沙官网线上基于Vue-cli和Vux的webpack配置

3.在项目public目录的index.html头部加入手机端适配的meta的代码
npm i postcss-loader postcss-px2rem -D
参考资料:

postcss-px2rem: https://www.npmjs.com/package/postcss-px2rem

mini-css-extract-plugin:https://webpack.js.org/plugins/mini-css-extract-plugin/#src/components/Sidebar/Sidebar.jsx

https://blog.csdn.net/mx18519142864/article/details/80771700

{
    test: /.css$/,
    exclude: /node_modules/,
    use: [

     MiniCssExtractPlugin.loader, 
      "css-loader",
    //   "postcss-loader"
      {
          loader:"postcss-loader",
          options:{
              plugins:()=>[ 
              px2rem({remUnit: 75})
            ]
          }
      },

    ]
},
  1. vux文档
  2. npm网站
  3. 大漠的手淘布局方案flexible
  4. vux的github
    另外:
2. 在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

题外话
微信iOS收款到账语音提醒开发总结

安装css文件打包插件

cnpm i -D MiniCssExtractPlugin css-loader

npm i vue-cli -g // 如果还没安装
vue init airyland/vux2 projectPath

cd projectPath
npm i
安装lib-flexible:

cnpm i -S lib-flexible

到这里只是调用,剩下的使用方法下面解决。

Vue3:脚手架配置

https://blog.csdn.net/weixin_41424247/article/details/80867351

与原来的vue-cli 2.x版本不同的是:如果使用最新版本的@vue/cli初始化vue项目时,通常看不到webpack的配制文件。而在原来的2.x版本,我们可以在utils.js中轻松配制px2rem相关配置。

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}
1. 安装

基于vue-cli配置
然后使用vux的webpack配置

4. 在根目录下创建配制文件vue.config.js,并配制如下信息

vue.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin"); 
const VueLoaderPlugin = require('vue-loader/lib/plugin'); 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const px2rem = require('postcss-px2rem');

function resolve (dir) {
    return path.join(__dirname,dir)
}
module.exports= {
    mode:"development",
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:"main.bundle.js"
    },
    resolve :{
        extensions: ['.js', '.vue', '.json',".css"],
         alias: {
           'vue$': 'vue/dist/vue.esm.js',
           '@': resolve('src'),
         }
    },
    devServer:{
        contentBase:"./dist",
        port:9000,
        open:true,
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:"./public/index.html",
            filename:"index.html"
        }),
        new CleanWebpackPlugin(['./dist']),
        new MiniCssExtractPlugin({
          filename: "color.css",
         // chunkFilename: "[id].css"
        })
    ],

    module:{
        rules:[
            { test: /.vue$/, loader: 'vue-loader'},
            //{test:/.css$/,use:['style-loader','css-loader']},
            {
                test:/.css$/,
                exclude:/node_modules/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader:"postcss-loader",
                        options:{
                            plugins:()=>[ 
                                px2rem({remUnit: 75})
                            ]
                        }
                    },
                ]
            },
            {
                test:/.js$/,
                exclude:/(node_modules|bower_components)/,
                use:['babel-loader']
            },
            {
                test:/(png|gif|jp(e)?g)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8192
                        }
                    }
                ]
            }

        ]
    }
}

res:
金沙官网线上 1

因为我配置了border不转换,所以/*no*/,可以不用加,加了也不顶用。但是字体一定要使用/*px*/这个注释。这样才能根据dpr改变字体大小。chrome的移动端调试工具不支持dpr改变,所以可以手动改变dpr查看效果。

4.在根目录下创建配制文件vue.config.js,并配制如下信息

vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                // options here will be passed to postcss-loader
                plugins: [require('postcss-px2rem')({
                    remUnit: 75
                })]
            }
        }
    }
}

res:
金沙官网线上 2

如果不是,那就这样改,把module.exports的内容改成以上内容。

2. 在项目入口文件main.js中引入lib-flexible

main.js

import'lib-flexible/flexible.js';

解决问题4

1. 安装

解决问题2

安装lib-flexible:

npm i -S lib-flexible

npm i -D postcss postcss-loader postcss-px2rem

这个问题不重复,难的是安装scss,用下面的方法

原生配置:

npm i lib-flexible -S
注:

1.remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是750px的,用75就刚刚好。

2.当你遇到1px的边框时,通常容易发现页面缺失部分边框,这时你可以使用/no/语法来屏蔽该属性转换,例如

border: 1px solid red; /*no*/

3.由于字体的特殊性,我们在编译font-size属性时,通常不使用rem单位,这时候你可以这样使用:

font-size: 24px; /*px*/
  1. 利用手淘flexible布局,字体需要根据dpr看来改变大小
  2. 利用postcss-px2rem自动转换页面中的rem,但是字体不转换,border利用1px方案解决也不转换
  3. 自动添加浏览器兼容前缀
  4. 利用fastclick解决点击延迟问题
  5. 安装postcss和scss还有less,不是我神经病,是引用插件和个人习惯。
  6. 转换vux的px为PX,因为weUI没有使用rem,使用的是em和px,但是又不能把它的px给转换成rem,而且vux还有一个1px.less,也不能把它的px转换成大写。但是浏览器不管px是大小写,都能按照px解析。
安装postcss和postcss-loader和postcss-px2rem:

cnpm i -D postcss postcss-loader postcss-px2rem

然后手淘方案有字体根据dpr动态改变,所以书写CSS的时候要在后面加上注释,如下:

3.在项目public目录的index.html头部加入手机端适配的meta的代码

解决问题1

引入之前要安装,我就不写了,如果你忘了还找不到错误,真真的不适合这行。

因为问题3也是postcss的插件,所以一起解决。(如果你按照vux的webpack按照的,问题3可省略)
再安装

配置目的

原文: juejin.im

本文由金沙官网线上发布于Web前端,转载请注明出处:金沙官网线上基于Vue-cli和Vux的webpack配置

您可能还会对下面的文章感兴趣: