加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
vue.config.js 4.84 KB
一键复制 编辑 原始数据 按行查看 历史
good_luck 提交于 2021-01-18 11:39 . deploy
/**
* @author chuzhixin 1204505056@qq.com (不想保留author可删除)
* @description cli配置
*/
const path = require('path')
const {
publicPath,
assetsDir,
outputDir,
lintOnSave,
transpileDependencies,
title,
abbreviation,
devPort,
providePlugin,
build7z,
donation,
} = require('./src/config')
const { webpackBarName, webpackBanner, donationConsole } = require('zx-layouts')
if (donation) donationConsole()
const { version, author } = require('./package.json')
const Webpack = require('webpack')
const WebpackBar = require('webpackbar')
const FileManagerPlugin = require('filemanager-webpack-plugin')
const dayjs = require('dayjs')
const date = dayjs().format('YYYY_M_D')
const time = dayjs().format('YYYY-M-D HH:mm:ss')
process.env.VUE_APP_TITLE = title || 'vue-admin-beautiful'
process.env.VUE_APP_AUTHOR = author || 'chuzhixin 1204505056@qq.com'
process.env.VUE_APP_UPDATE_TIME = time
process.env.VUE_APP_VERSION = version
const resolve = (dir) => path.join(__dirname, dir)
const mockServer = () => {
if (process.env.NODE_ENV === 'development') return require('./mock')
else return ''
}
module.exports = {
publicPath,
assetsDir,
outputDir,
lintOnSave,
transpileDependencies,
devServer: {
hot: true,
port: devPort,
open: true,
noInfo: false,
overlay: {
warnings: true,
errors: true,
},
after: mockServer(),
},
configureWebpack() {
return {
resolve: {
alias: {
'@': resolve('src'),
},
},
plugins: [
new Webpack.ProvidePlugin(providePlugin),
new WebpackBar({
name: webpackBarName,
}),
],
}
},
chainWebpack(config) {
config.plugins.delete('preload')
config.plugins.delete('prefetch')
config.module
.rule('svg')
.exclude.add(resolve('src/remixIcon'))
.add(resolve('src/colorfulIcon'))
.end()
config.module
.rule('remixIcon')
.test(/\.svg$/)
.include.add(resolve('src/remixIcon'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({ symbolId: 'remix-icon-[name]' })
.end()
config.module
.rule('colorfulIcon')
.test(/\.svg$/)
.include.add(resolve('src/colorfulIcon'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({ symbolId: 'colorful-icon-[name]' })
.end()
/* config.when(process.env.NODE_ENV === "development", (config) => {
config.devtool("source-map");
}); */
config.when(process.env.NODE_ENV !== 'development', (config) => {
config.performance.set('hints', false)
config.devtool('none')
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial',
},
elementUI: {
name: 'chunk-elementUI',
priority: 20,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
},
fortawesome: {
name: 'chunk-fortawesome',
priority: 20,
test: /[\\/]node_modules[\\/]_?@fortawesome(.*)/,
},
},
})
config
.plugin('banner')
.use(Webpack.BannerPlugin, [`${webpackBanner}${time}`])
.end()
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true,
})
.end()
})
if (build7z) {
config.when(process.env.NODE_ENV === 'production', (config) => {
config
.plugin('fileManager')
.use(FileManagerPlugin, [
{
onEnd: {
delete: [`./${outputDir}/video`, `./${outputDir}/data`],
archive: [
{
source: `./${outputDir}`,
destination: `./${outputDir}/${abbreviation}_${outputDir}_${date}.7z`,
},
],
},
},
])
.end()
})
}
},
runtimeCompiler: true,
productionSourceMap: false,
css: {
requireModuleExtension: true,
sourceMap: true,
loaderOptions: {
scss: {
/*sass-loader 8.0语法 */
//prependData: '@import "~@/styles/variables.scss";',
/*sass-loader 9.0写法,感谢github用户 shaonialife*/
additionalData(content, loaderContext) {
const { resourcePath, rootContext } = loaderContext
const relativePath = path.relative(rootContext, resourcePath)
if (
relativePath.replace(/\\/g, '/') !== 'src/styles/variables.scss'
) {
return '@import "~@/styles/variables.scss";' + content
}
return content
},
},
},
},
}
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化