vue-cli4打包（vue.config.js）修改js，css，img，fonts的输出路径

喜欢ヅ旅行 2024-03-17 10:13 18阅读 0赞

vue.config.js

module.exports = {
        
       ....
        // 修改js输出路径
        configureWebpack: {
        
            output: {
        
                filename: "custom-js/[name].[hash:8].js",
                chunkFilename: "custom-js/[name].[hash:8].js",
            },
        },
        // 修改css输出路径
        css: {
        
            // css是否从js中分离出来，默认true
            // extract: true,
            sourceMap: false,
            extract: {
        
                filename: "custom-css/[name].[hash:8].css",
                chunkFilename: "custom-css/[name].[hash:8].css",
            },
        },
        chainWebpack: (config) => {
        
           // 修改图片输出目录
          config.module
          .rule('images')
          .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
          .use('url-loader')
          .loader('url-loader')
          .tap(options => {
        
            options.fallback.options.name = 'custom-img/[name].[hash:8].[ext]';
            return options;
          });
        // 更改字体的输出路径
          config.module
          .rule('fonts')
          .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
          .use('url-loader')
          .loader('url-loader')
          .tap(options => {
        
            options.fallback.options.name = 'custom-fonts/[name].[hash:8].[ext]';
            return options;
          });   
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-cli4打包（vue.config.js）修改js，css，img，fonts的输出路径

vue.config.js module.exports = { .... // 修改js输出路径 c

喜欢ヅ旅行/ 2024年03月17日 10:13/ 0 赞/ 19 阅读

相关 VueCli3项目解决打包问题

背景描述：自己之前做了一个vue的小案例，但是从来没有用过npm run build,果真遇到了挺多令人头疼的问题！然后在这里和大家分享一下！项目技术：VueCli3脚手

ゞ浴缸里的玫瑰/ 2023年09月26日 10:01/ 0 赞/ 30 阅读

相关修改Zookeeper输出日志 zookeeper.out输出路径

使用过zookeeper的小伙伴都知道，当前终端处于哪个目录，执行完zkServer.sh start命令， zookeeper.out就会写在哪个目录，下次想看zookeep

深藏阁楼爱情的钟/ 2023年06月02日 12:53/ 0 赞/ 197 阅读

相关 vuecli4打包优化(Marksheng）

一、去除生产环境sourceMap sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间 module.exports

浅浅的花香味﹌/ 2022年12月27日 04:41/ 0 赞/ 301 阅读

相关 VueCli4实现自适应

参考：[Vue-cli4项目自适应 - 简书][Vue-cli4_ -] > 在scss中/\no\/不生效，可以将px写为PX > px2rem-loader

悠悠/ 2022年09月11日 06:15/ 0 赞/ 184 阅读

相关修改npm打包输出路径

使用`dest`参数修改输出路径，可以结合该命令实现自动化，自动化见下文 npm run build:prod -- --dest=../dist2 `路径可以为相

偏执的太偏执、/ 2022年09月10日 13:16/ 0 赞/ 366 阅读

相关 vuecli4中关闭Eslint

元气满满，直接干！如果在创建项目时选择了eslint，而你又无法驾驭它，噩梦就开始。各种报错，让你非常难受！这时我们就要关闭eslint，过程非常简单。 1. 在项目

「爱情、让人受尽委屈。」/ 2022年09月02日 00:45/ 0 赞/ 305 阅读

相关 vuecli4中配置服务器

元气满满，直接干！在使用vuecli4开发项目时，如果需要自己开发服务器测试项目，单独编写一个服务器，非常难受！这时，我们可以在vuecli4中直接进行服务器开发。过

女爷i/ 2022年09月02日 00:44/ 0 赞/ 238 阅读

相关 vuecli4中配置打包使用相对路径

元气满满，直接干！使用vuecli4进行项目打包时，默认使用的是根目录的方式，这样打包直接项目直接运行就是一个大白屏，非常难受！这时我们就需要在设置打包使用相对目录的方

╰半橙微兮°/ 2022年09月02日 00:44/ 0 赞/ 262 阅读

相关修改tomcat日志输出路径

参考：[https://blog.csdn.net/wulintong/article/details/77051184][https_blog.csdn.net_wulint

小鱼儿/ 2022年02月04日 08:37/ 0 赞/ 278 阅读