TelpoH5FrontendWeb/vue.config.js

/*
 * @Author: your name
 * @Date: 2020-04-15 10:00:32
 * @LastEditTime: 2022-05-11 14:42:10
 * @LastEditors: JinxChen
 * @Description: In User Settings Edit
 * @FilePath: \AntpayFrontEnd\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,
    // 多页面配置
    pages: {
        // 先配置主页
        index: {
            entry: './src/main.js',
            template: './public/index.html',
            /* title: '用户登录' */
            chunks: ['chunk-vendors', 'chunk-common', 'index'],
            subpage: 'src/main.js'
        },
        // 再配置各个子页面：登录后课表查询页
        gaode: {
            entry: './src/pages/gaode.js',
            template: './public/gaode.html',
            title: '高德地图demo',
            chunks: ['chunk-vendors', 'chunk-common', 'gaode'],
            subpage: 'src/pages/gaode.js'
        }
    },
    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";`
            },
        },
        // 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'
        // }])
    }
};