vue-cli 3.X及以上vue.config.js中的配置

最新推荐文章于 2024-04-07 18:51:51 发布

前端陽哥

最新推荐文章于 2024-04-07 18:51:51 发布

阅读量865

点赞数 1

分类专栏： vue.js 文章标签： javascript vue.js webpack

本文链接：https://blog.csdn.net/weixin_44600358/article/details/126766681

版权

vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近项目需要适配IE8浏览器，但我的项目中用了大量ES6语法及node依赖。需要用webpack工程化的编译；vue脚手架已将Webpack内置。

vue.config.js文件中的大致配置有：

module.exports = {
    //node_module依赖包默认是不会被wbpack打包的
    //此配置可单独将node_modules依赖包中某项进行webpack打包
    transpileDependencies: [],

    // 【必要】静态文件使用相对路径
    publicPath:  "/",
    //打包后的文件夹名字及路径
    outputDir: './' ，
    // 用于放置生成的静态资源 (js、css、img、fonts) 的；
    //（项目打包之后，静态资源会放在这个文件夹下）
    assetsDir: 'static',
    // 是否开启eslint保存检测，保存时是否校验有效值：ture | false | 'error'
    lintOnSave: false,
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap: false,

    //打包文件是否使用hash
    filenameHashing: true,

    //设置跨域代理
    devServer: {
     
    },


    // configureWebpack 它可以是一个对象，它也可以是一个函数：可进行修改wenpack的配置

    configureWebpack: (config) => {
       return {  }
    },


    //chainWebpack 链式操作webpack链式配置 
    chainWebpack(config) {
        config.plugins.delete('preload') // TODO: need test
       
        config.module
            .rule('svg')
            .exclude.add(resolve('src/assets/icons'))
            .end()
     
        }



}

VUE设置跨域代理devServer

   //设置跨域代理
    devServer: {
        host: '0.0.0.0',
        port: port,  // 端口号，如果端口号被占用，会自动加1
        https: false, //协议
        open: false, //启动服务时自动打开浏览器访问
        proxy: {
            '/api': {
//代理地址，这里设置的地址会代替axios中设置的baseURL
                target: 'http://172.16.xxx.xxx:8085',
                changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
                //ws: true, // 是否支持跨域
                //pathRewrite方法重写url
                pathRewrite: {
                    // 重写之后url为 http://192.168.1.16:8085/api/xxxx
                    '^/api': '/api'
                },
                //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
            },

            [process.env.VUE_APP_BASE_API]: {
                target: `http://172.16.14.43/management`,

                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            },

        },
        // disableHostCheck用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。     
        //DevServer 默认只接受来自本地的请求，
        // 关闭后可以接受来自任何 HOST 的请求。 它通常用于搭配 --host 0.0.0.0 使用，因为你想要 
        // 其它设备访问你本地的服务，
        // 但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。

        disableHostCheck: true
    },

VUE修改默认Webpack配置

configureWebpack和chainWebpack两项都可以修改Webpack配置

configureWebpack和chainWebpack有啥区别尼？

相同点：

configureWebpack 和 chainWebpack的作用相同，唯一的区别就是它们修改 webpack 配置的方式

不同点：

configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置，该对象将会被 webpack-merge 合并入最终的 webpack 配置。

chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置。

你跟上了吗？？？跟上了吗？？？跟上了吗？？？

举个栗子：

别名配置（@号为什么在vue-cli中相当于src目录下的路径）且打包后自动自动删除console.log

configureWebpack：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  configureWebpack: (config) => {
        return {
            resolve: {
                     // 别名配置
                      alias: { '@': resolve('src')}
                     },
            //引入babel插件
            plugins: [
            //打包环境去掉console.log
              new UglifyJsPlugin({
                uglifyOptions: {
                  compress: {
                    warnings: false,
                    drop_console: true,  //注释console
                    drop_debugger: true, //注释debugger
                    pure_funcs: ['console.log'], //移除console.log },
                
                            }}),
                    ],
                }

    },

}

//chainWebpack 链式操作webpack链式配置

//chainWebpack 链式操作webpack链式配置 
module.exports = {
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')   
 chainWebpack(config) {
 //set第一个参数：设置的别名，第二个参数：设置的路径
   config.resolve.alias.set('@',resolve('src'))
//注意：这里babel插件不需要通过 new 插件（） 使用。且可继续打点使用 
.optimization.minimizer('terser').tap((args) => {
            args[uglifyOptions]: {
                  compress: {
                    warnings: false,
                    drop_console: true,  //注释console
                    drop_debugger: true, //注释debugger
                    pure_funcs: ['console.log'], //移除console.log },
                
                                }
        })

}

}



什么什么？？？？？        tap是啥？ 
optimization.minimizer是啥？
我只能告诉你先学Webpack后再来看，你会懂的！