美文网首页VUE
vue.config.js基本配置

vue.config.js基本配置

作者: 一只菜鸟正在脱毛 | 来源:发表于2020-06-09 13:53 被阅读0次
    解决打包上线之后内存过大
    /*
     * @Author: your name
     * @Date: 2020-06-05 11:18:37
     * @LastEditTime: 2020-06-09 11:50:43
     * @LastEditors: Please set LastEditors
     * @Description: In User Settings Edit
     * @FilePath: \website\website\vue.config.js
     */
    
    
    
    module.exports = {
        // css: {
        //     loaderOptions: {
        //         postcss: {
        //             plugins: [
        //                 require("postcss-px-to-viewport")({
        //                     "viewportWidth": 1180,
        //                     "minPixelValue": 1,
        //                     "mediaQuery": false,
        //                     //    "selectorBlackList": ["van", "el"],
        //                     "landscape": true,
        //                     "landscapeUnit": "vw",
        //                     "landscapeWidth": 1920
        //                 })
        //             ]
        //         }
        //     }
        // },
    
        // 基本路径
        publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
        // 输出文件目录
        outputDir: 'dist', // 默认dist
        // 用于嵌套生成的静态资产(js,css,img,fonts)目录
        // assetsDir: '',
        // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
        indexPath: 'index.html', // Default: 'index.html'
        filenameHashing: true,
        // 构建多页时使用
        pages: undefined,
        // eslint-loader是否在保存的时候检查
        lintOnSave: false,
        // 是否使用包含运行时编译器的Vue核心的构建
        runtimeCompiler: false,
        // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来
        transpileDependencies: [],
        // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
        productionSourceMap: false,
        // 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。如果这个值是一个函数,则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置版本。
        configureWebpack: config => {
            if (process.env.NODE_ENV === 'production') {
                // 为生产环境修改配置...
            } else {
                // 为开发环境修改配置...
            }
        },
    
        // 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
        chainWebpack: config => {
            /*config.module
              .rule('images')
              .use('url-loader')
                .loader('url-loader')
                .tap(options => {
                  // 修改它的选项...
                  return options
                })*/
        },
        // css相关配置
        css: {
            // 启用 CSS modules
            modules: false,
            // 是否使用css分离插件
            extract: true,
            // 开启 CSS source maps?
            sourceMap: false,
            // // css预设器配置项
            loaderOptions: {
                postcss: {
                    plugins: [
                        require("postcss-px-to-viewport")({
                            "viewportWidth": 1180,
                            "minPixelValue": 1,
                            "mediaQuery": false,
                            //    "selectorBlackList": ["van", "el"],
                            "landscape": true,
                            "landscapeUnit": "vw",
                            "landscapeWidth": 1920
                        })
                    ]
                }
            }
        },
        // webpack-dev-server 相关配置
        devServer: {
            host: '0.0.0.0',
            port: 8080,
            https: false,
            open: true,
            hotOnly: false,
            proxy: null, // 设置代理
            before: app => {},
        },
        // PWA 插件相关配置
        pwa: {},
    
        // 第三方插件配置
        pluginOptions: {
            // ...
    
        }
    
    
    }
    

    相关文章

      网友评论

        本文标题:vue.config.js基本配置

        本文链接:https://www.haomeiwen.com/subject/hnpstktx.html