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://xxxx.xxx.xxx/gateway',
                secure: false,  // 如果是https接口，需要配置這個參數
                // ws: true,//是否代理websockets
                changeOrigin: true,
                pathRewrite: {
                    '^/gateway': ''
                }
            }
        }
    },
    productionSourceMap: false,

}