vue.config.js配置如下：
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = process.env.VUE_APP_TITLE || 'Unite PC Manager Project' // 网页标题
const { getModuleConfig, isDev, getCustomParams } = require('../domain.config')
const cfg = getModuleConfig(process.argv, 'manager')
const isDevMode = isDev(process.argv)
// 本地开发和开发环境开发开启 console 和 debugger
const runEnv = getCustomParams(process.argv).runEnv || ''
const isDevRunEnv = ['development', 'production'].includes(runEnv)
const port = process.env.port || process.env.npm_config_port || cfg.port // 端口
const UpMfPlugin = require('./webpack.mf.js') // 引入MF配置
const ExternalTemplateRemotesPlugin = require('external-remotes-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGizpExtensions = ['js', 'css']
const gzipPlugin = new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGizpExtensions.join('|') + ')$'),
threshold: 0,
deleteOriginalAssets: false // 删除源文件 （可选）
})
const domain = /^\[(.*)\]$/.test(cfg.domain) ? '' : cfg.domain
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.xxx.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.xxx.vip/admin/，则设置 baseUrl 为 /admin/。
// publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// 解决 vue-cli 和 w5mf 的兼容问题
publicPath: cfg.serviceName
? `${domain}/${cfg.serviceName}`
: domain === ''
? '/'
: domain,
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
outputDir: cfg.serviceName ? `dist/${cfg.serviceName}` : 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: 'static',
// 是否开启eslint保存检测，有效值：ture | false | 'error'
// lintOnSave: !params.isDev,
lintOnSave: false,
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// productionSourceMap: true,
// webpack-dev-server 相关配置
devServer: {
port: port,
hot: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers':
'X-Requested-With, content-type, Authorization'
}
},
// filenameHashing: false,
configureWebpack: {
devtool: isDevMode ? 'eval-cheap-module-source-map' : false,
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
watchOptions: {
ignored: /node_modules/,
poll: 1000 // 轮询间隔（适用于 Docker/Vagrant 环境）
},
performance: {
hints: false,
// 入口起点的最大体积
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
// 只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js')
}
},
plugins: [
UpMfPlugin,
new ExternalTemplateRemotesPlugin(),
...(isDevMode ? [] : [gzipPlugin])
],
optimization: {
// splitChunks: {
// chunks: 'all' // 更好的代码分割
// }
}
},
// 解决 vue-cli 和 w5mf 的兼容问题
chainWebpack: (config) => {
// set svg-sprite-loader
config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config.optimization.delete('splitChunks')
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.compress.drop_console = !isDevRunEnv
args[0].terserOptions.compress.drop_debugger = !isDevRunEnv
// args[0].terserOptions.compress.drop_debugger = false
return args
})
},
// 解决 vue-cli 和 w5mf 的兼容问题
transpileDependencies: true,
// 配置全局样式变量
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/css/var.scss";`
}
},
extract: {
ignoreOrder: true // 消除警告
}
}
}
为什么微前端该模块修改代码页面不生效 其他模块正常
扫一扫
1611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
