TelpoH5FrontendWeb/vue.config.js

/*
 * @Author: your name
 * @Date: 2020-04-15 10:00:32
 * @LastEditTime: 2022-02-23 17:36:48
 * @LastEditors: JinxChen
 * @Description: In User Settings Edit
 * @FilePath: \AlipayFrontEnd\vue.config.js
 */
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: {},
        // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.
        requireModuleExtension: true
    },
    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'
        // }])
    }
};