TelpoH5FrontendWeb/vue.config.js

/*
 * @Author: your name
 * @Date: 2020-04-15 10:00:32
 * @LastEditTime: 2023-02-25 15:35:15
 * @LastEditors: JinxChen
 * @Description: In User Settings Edit
 * @FilePath: \TelpoH5FrontendWeb\vue.config.js
 */
const autoprefixer = require('autoprefixer'); // 根据屏幕动态改变根元素font-size

const pxtorem = require('postcss-pxtorem'); // 把代码中px转为rem

// const CompressionWebpackPlugin = require('compress-webpack-plugin');

const CompressionPlugin = require("compression-webpack-plugin");
const port = process.env.port || process.env.npm_config_port || 8080;/* 7788 */ // dev port

module.exports = {
    // 注意： 多页面配置 不再使用全路径，单页面时可以开启
    publicPath: './',
    outputDir: 'dist',
    // assetsDir: 'static',
    // lintOnSave: process.env.NODE_ENV === 'development',
    productionSourceMap: false,
    devServer: {
        port: port,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        /* proxy: proxy, */
        /* host: '192.168.3.186',  */// 原为: hotst: 'localhost', 可在同一ip局域网下通过网址生成二维码的方式调试h5, 注意:调试完毕请注释
        //disableHostCheck: true, //真机调试开启
    },
    css: {
        // 将组件内部的css提取到一个单独的css文件（只用在生产环境）
        // 也可以是传递给 extract-text-webpack-plugin 的选项对象
        extract: true,
        // 允许生成 CSS source maps?
        sourceMap: true,
        // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }
        loaderOptions: {
            sass: {
                // 比如你可以这样向所有 Sass/Less 样式传入共享的全局变量
                prependData: `@import "@/assets/css/public.scss";`
            },
            postcss: {
                plugins: [
                    autoprefixer({
                        overrideBrowserslist: ["last 15 versions"]
                    }),
                    pxtorem({
                        rootValue: 37.5, // 换算的基数
                        // rootValue: 75, // 换算的基数
                        /* selectorBlackList: ["van"], */
                        propList: ["*"],
                        //exclude: /node_modules/
                    })
                ]
            }
        },
        // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.
        requireModuleExtension: true
    },
    configureWebpack: {
        externals: {
          'AMap': 'AMap'
        }
    },
    chainWebpack: config => {
        // 该配置用来配置打包生成的文件是否带hash值后缀，该值默认为true，
        // 在模式为production的时候，打包出的js和css文件会自动添加hash值后缀。
        // 但是在当前模式为development的时候，就算该值为true，打包出的js文件不带hash值（css文件仍然受该值控制）。
        // 这个时候我们该怎么给打包的文件增加hash值呢：
        if (process.env.NODE_ENV !== 'production')
            config.output.filename('js/[name].[hash].js').chunkFilename('js/[name].[hash].js').end();

        // 如果filenameHashing设置为了false，可以通过这段代码给打包出的css文件增加hash值
        // config.plugin('extract-css').tap(args => [{
        //   filename: 'css/[name].[hash].css',
        //   chunkFilename: 'css/[name].[hash].css'
        // }])
    }
};