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;
      });   
    },
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐