修改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, }