ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-06-22 16:33:57  阅读:280  来源: 互联网

标签:vue 文件目录 name Timestamp module js cli3.0 options css


修改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,文件目录,name,Timestamp,module,js,cli3.0,options,css
来源: https://www.cnblogs.com/zjxlicheng/p/14919130.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有