vue-cli3.0 修改打包文件目录

本文主要是介绍vue-cli3.0 修改打包文件目录，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

修改js输出目录

module.exports = {
    configureWebpack: {
        output : {
            // 把子应用打包成 umd 库格式
            library: `${name}-[name]`,
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_${name}`,
            filename: `js/[name].${Timestamp}.js`,
            chunkFilename: `js/[name].${Timestamp}.js`
        	},
	}
}

修改css输出目录
主要通过vue-cli里的 css对象的extract 参考官方文档

module.exports = {
    configureWebpack: {
        output : {
            // 把子应用打包成 umd 库格式
            library: `${name}-[name]`,
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_${name}`,
            filename: `js/[name].${Timestamp}.js`,
            chunkFilename: `js/[name].${Timestamp}.js`
        	},
	},
	 css: {
        	extract: {
            		filename: `[name].${Timestamp}.css`,
            		chunkFilename: `[name].${Timestamp}.css`
        	},
    	},
}

或者通过三方插件的形式来实现需要下载相应的包 （推荐上面那种方式）

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	configureWebpack:{
		plugins:[
			new MiniCssExtractPlugin({
				filename: `[name].${Timestamp}.css`,
				chunkFilename: `[name].${Timestamp}.css`
			})
		]
	}
}

修改静态资源图片的目录
注意配置这个是需要下载 Loader的包 参考官方文档

module.exports = {
    chainWebpack: config => {
        config.module
            .rule("images")
            .use("url-loader")
            .tap(options => {
                options.name = `img/[name].${Timestamp}.[ext]`;
                options.fallback = {
                    loader: "file-loader",
                    options: {
                        name: `img/[name].${Timestamp}.[ext]`
                    }
                };
                return options;
            });
    },
}

完整代码

const { name } = require('./package.json')
const Timestamp = new Date().getTime();
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    //如果没有发布的目录和路径，就要用/，千万注意，在public-path.js中会引用到
	// publicPath这个根据个人项目来定  一般都是 ./
    publicPath: process.env.VUE_APP_PREFIX + '/' + name + '/',

    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].title= 'ruis'
            return args
        })

        config.module
            .rule("images")
            .use("url-loader")
            .tap(options => {
                options.name = `img/[name].${Timestamp}.[ext]`;
                options.fallback = {
                    loader: "file-loader",
                    options: {
                        name: `img/[name].${Timestamp}.[ext]`
                    }
                };
                return options;
            });
    },

    //transpileDependencies: ['common'],

    //为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置
    configureWebpack: {
        output : {
            // 把子应用打包成 umd 库格式
            library: `${name}-[name]`,
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_${name}`,
            filename: `js/[name].${Timestamp}.js`,
            chunkFilename: `js/[name].${Timestamp}.js`
        },

        // 修改打包后css文件名
        // plugins: [
        //     new MiniCssExtractPlugin({
        //         filename: `[name].${Timestamp}.css`,
        //         chunkFilename: `[name].${Timestamp}.css`
        //     })
        // ],

        //引用CDN
        externals: {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'vuex':'Vuex',
            'element-ui': 'ElementUI',
            // 'xeutils':'XEUtils',
            'vxe-table' :'VXETable',
            'xe-utils' :'XEUtils',
        },
    },

    css: {
        extract: {
            filename: `[name].${Timestamp}.css`,
            chunkFilename: `[name].${Timestamp}.css`
        },
    },

    //本地调试模式下的配置，请注意一定要支持跨域
    devServer: {
        port: 8084,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        proxy: {
            '/gateway': {
                target: 'https://saas.ruiscloud.com/gateway',
                secure: false,  // 如果是https接口，需要配置这个参数
                // ws: true,//是否代理websockets
                changeOrigin: true,
                pathRewrite: {
                    '^/gateway': ''
                }
            }
        }
    },
    productionSourceMap: false,

}

这篇关于vue-cli3.0 修改打包文件目录的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！