const CompressionWebpackPlugin = require("compression-webpack-plugin");
|
const VueFilenameInjector = require("@d2-projects/vue-filename-injector");
|
const ThemeColorReplacer = require("webpack-theme-color-replacer");
|
const forElementUI = require("webpack-theme-color-replacer/forElementUI");
|
const cdnDependencies = require("./dependencies-cdn");
|
const { chain, set, each } = require("lodash");
|
|
// 拼接路径
|
const resolve = (dir) => require("path").join(__dirname, dir);
|
|
// 增加环境变量
|
process.env.VUE_APP_VERSION = require("./package.json").version;
|
process.env.VUE_APP_BUILD_TIME = require("dayjs")().format("YYYY-M-D HH:mm:ss");
|
|
// 基础路径 注意发布之前要先修改这里
|
const publicPath = process.env.VUE_APP_PUBLIC_PATH || "/";
|
|
// 设置不参与构建的库
|
const externals = {};
|
cdnDependencies.forEach((pkg) => {
|
externals[pkg.name] = pkg.library;
|
});
|
|
// 引入文件的 cdn 链接
|
const cdn = {
|
css: cdnDependencies.map((e) => e.css).filter((e) => e),
|
js: cdnDependencies.map((e) => e.js).filter((e) => e),
|
};
|
|
// 多页配置，默认未开启，如需要请参考 https://cli.vuejs.org/zh/config/#pages
|
const pages = undefined;
|
// const pages = {
|
// index: './src/main.js',
|
// subpage: './src/subpage.js'
|
// }
|
|
module.exports = {
|
// 根据你的实际情况更改这里
|
|
publicPath,
|
lintOnSave: true,
|
devServer: {
|
proxy: {
|
"/api/base": {
|
target: "http://192.168.20.119:8001",
|
ws: true,
|
changeOrigin: true,
|
},
|
"/api/user": {
|
target: "http://192.168.20.119:8001",
|
ws: true,
|
changeOrigin: true,
|
},
|
"/api/menu": {
|
target: "http://192.168.20.119:8001",
|
ws: true,
|
changeOrigin: true,
|
},
|
"/api-s": {
|
target: "http://192.168.20.119:9081",
|
ws: true,
|
changeOrigin: true,
|
},
|
"/api": {
|
target: "http://192.168.20.118:8001",
|
ws: true,
|
changeOrigin: true,
|
},
|
"/v1/": {
|
// target: "http://127.0.0.1:8003",
|
|
target: "http://192.168.20.120:8003",
|
ws: true,
|
changeOrigin: true,
|
},
|
// "/api-s": {
|
// target: "http://192.168.20.113:9081",
|
// ws: true,
|
// changeOrigin: true,
|
// },
|
},
|
publicPath, // 和 publicPath 保持一致
|
disableHostCheck: process.env.NODE_ENV === "development", // 关闭 host check，方便使用 ngrok 之类的内网转发工具
|
},
|
css: {
|
loaderOptions: {
|
// 设置 scss 公用变量文件
|
sass: {
|
prependData: "@import '~@/assets/style/public.scss';",
|
},
|
},
|
},
|
pages,
|
configureWebpack: (config) => {
|
const configNew = {};
|
if (process.env.NODE_ENV === "production") {
|
configNew.externals = externals;
|
configNew.plugins = [
|
// gzip
|
new CompressionWebpackPlugin({
|
filename: "[path].gz[query]",
|
test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"),
|
threshold: 10240,
|
minRatio: 0.8,
|
deleteOriginalAssets: false,
|
}),
|
];
|
}else if(process.env.NODE_ENV === "development"){
|
|
}
|
return configNew;
|
},
|
// 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js
|
chainWebpack: (config) => {
|
/**
|
* 添加 CDN 参数到 htmlWebpackPlugin 配置中
|
* 已适配多页
|
*/
|
const htmlPluginNames = chain(pages)
|
.keys()
|
.map((page) => "html-" + page)
|
.value();
|
const targetHtmlPluginNames = htmlPluginNames.length
|
? htmlPluginNames
|
: ["html"];
|
each(targetHtmlPluginNames, (name) => {
|
config.plugin(name).tap((options) => {
|
set(
|
options,
|
"[0].cdn",
|
process.env.NODE_ENV === "production" ? cdn : []
|
);
|
return options;
|
});
|
});
|
|
/**
|
* 删除懒加载模块的 prefetch preload，降低带宽压力
|
* https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
|
* https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
|
* 而且预渲染时生成的 prefetch 标签是 modern 版本的，低版本浏览器是不需要的
|
*/
|
config.plugins.delete("prefetch").delete("preload");
|
// 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559
|
config.resolve.symlinks(true);
|
config.plugin("theme-color-replacer").use(ThemeColorReplacer, [
|
{
|
fileName: "css/theme-colors.[contenthash:8].css",
|
matchColors: [
|
...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR), // Element-ui主色系列
|
],
|
externalCssFiles: [
|
"./node_modules/element-ui/lib/theme-chalk/index.css",
|
], // optional, String or string array. Set external css files (such as cdn css) to extract colors.
|
changeSelector: forElementUI.changeSelector,
|
},
|
]);
|
config
|
// 开发环境 sourcemap 不包含列信息
|
.when(process.env.NODE_ENV === "development", (config) =>
|
config.devtool("cheap-source-map")
|
)
|
// 预览环境构建 vue-loader 添加 filename
|
.when(process.env.VUE_APP_SCOURCE_LINK === "TRUE", (config) =>
|
VueFilenameInjector(config, {
|
propName: process.env.VUE_APP_SOURCE_VIEWER_PROP_NAME,
|
})
|
);
|
// markdown
|
config.module
|
.rule("md")
|
.test(/\.md$/)
|
.use("text-loader")
|
.loader("text-loader")
|
.end();
|
// svg
|
const svgRule = config.module.rule("svg");
|
svgRule.uses.clear();
|
svgRule.include
|
.add(resolve("src/assets/svg-icons/icons"))
|
.end()
|
.use("svg-sprite-loader")
|
.loader("svg-sprite-loader")
|
.options({
|
symbolId: "d2-[name]",
|
})
|
.end();
|
// image exclude
|
const imagesRule = config.module.rule("images");
|
imagesRule
|
.test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
|
.exclude.add(resolve("src/assets/svg-icons/icons"))
|
.end();
|
// 重新设置 alias
|
config.resolve.alias.set("@api", resolve("src/api"));
|
// 分析工具
|
if (process.env.npm_config_report) {
|
config
|
.plugin("webpack-bundle-analyzer")
|
.use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
|
}
|
},
|
// 不输出 map 文件
|
productionSourceMap: false,
|
// i18n
|
pluginOptions: {
|
i18n: {
|
locale: "zh-chs",
|
fallbackLocale: "en",
|
localeDir: "locales",
|
enableInSFC: true,
|
},
|
},
|
};
|
