vue-cli 3.0 配置文件 vue.config.js

vue-cli 3 基于webpack 4， vue-cli2 基于webpack3

vue-cli3 在项目初始化的时候，已经帮开发者配置了80%，在@vue/cli-service/lib/config 目录下，可以查看配置信息。

vue.config.js 基本配置

脚手架安装完成后，在项目根目录下新建：vue.config.js文件，项目会自动加载配置信息

module.exports = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
    /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '' */
    publicPath: process.env.NODE_ENV === 'production' ? './' : '',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: 'dist',
    /* 放置生成的静态资源 (js、css、img、fonts) 的目录 */
    assetsDir: "assets",
    /* 是否在构建生产包时生成 sourceMap 文件，设置为 false 以加速生产环境构建*/
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: true,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 8000,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址 */
                target: 'http://localhost:9005/',
                /* 允许跨域 */
                changeOrigin: true,
            },
        },
    },
    configureWebpack: (config) => {
        //基础配置
    },

    chainWebpack: (config) => {
        //链式配置
        config.module
        .rule('eslint')
        .exclude
        .add('src/lib')
        .end()
    },
    //https://cli.vuejs.org/zh/config/#css-loaderoptions
    css: {
        loaderOptions: {
            css: {
                // 这里的选项会传递给 css-loader
            },
            postcss: {
                // 这里的选项会传递给 postcss-loader
            }
        }
    }

}复制代码

修改loader

eg:修改eslint 的配置，不去检测src/lib ，此处为引入的外部库文件

方法一：新建一个.eslintignore文件处理

方法二：修改webpack 文件

1) vue inspect>output.js

2)在output.js 中搜索相关配置，确定要修改的是exclude 项

3）参考webpack-chain，查找exclude,只找到一个，同级别的include 可以有多个，参照include的方法

    chainWebpack: (config) => {
        //链式配置
        config.module
        .rule('eslint')
        .exclude
        .add('src/lib')
        .end()
    },
复制代码

参考：www.jb51.net/article/146…

添加一个loader

使用了一个第三方的包，但是不支持ie浏览器，要编译的时候，把node_module 中特定的包也编译一下，添加babel-loader

.add() 内写入要编译的文件路径，.use 前要有.end 否则在 vue inspect>output.js时会报错。

  
    chainWebpack:(config) => {
        config.module
            .rule('js')
              .test(/\.js$/)
            //   .pre()
              .include.add(path.resolve('node_modules/umq-node-desmd5'))
              .add(path.resolve('node_modules/ms-vue-adt'))
              .end().use('babel-loader').loader('babel-loader')
        //添加分析工具
        if(process.env.NODE_ENV === 'production'){
            //npm intall webpack-bundle-analyzer –save-dev   


            // 代码分析工具 npm run build --report 查看
            if(process.env.npm_config_report){
                config.plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                .end();
                //删除预加载
                config.plugins.delete('prefetch');
            }
        }
    }复制代码

vue-cli3 打包的时候打包为gzip文件

安装依赖包

nmp i compression-webpack-plugin -D复制代码

webpck 中配置

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {

    if (process.env.NODE_ENV === 'production') {

        // 为生产环境修改配置...

        config.mode = 'production'

        return {

            plugins: [new CompressionPlugin({

                test: /\.js$|\.html$|\.css/, //匹配文件名

                threshold: 10240, //对超过10k的数据进行压缩

                deleteOriginalAssets: false //是否删除原文件

            })]

        }

    }

}
复制代码