"use strict";
|
const path = require("path");
|
const defaultSettings = require("./src/settings.js");
|
// 代理目标地址（后端服务），例如: http://172.17.0.1:8080
|
// 启动时可通过环境变量覆盖：VUE_APP_PROXY_TARGET=...
|
const baseUrl = process.env.VUE_APP_PROXY_TARGET || "http://1.15.17.182:9031";
|
|
function resolve(dir) {
|
return path.join(__dirname, dir);
|
}
|
|
const name = defaultSettings.title || "CMS"; // page title
|
|
// If your port is set to 80,
|
// use administrator privileges to execute the command line.
|
// For example, Mac: sudo npm run
|
// You can change the port by the following method:
|
// port = 9527 npm run dev OR npm run dev --port = 9527
|
// 固定开发服务端口：确保外部可访问 `172.17.0.1:9031`
|
const port = 9001; // dev port
|
|
// All configuration item explanations can be find in https://cli.vuejs.org/config/
|
module.exports = {
|
/**
|
* You will need to set publicPath if you plan to deploy your site under a sub path,
|
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
|
* then publicPath should be set to "/bar/".
|
* In most cases please use '/' !!!
|
* Detail: https://cli.vuejs.org/config/#publicpath
|
*/
|
transpileDependencies: [
|
"element-ui",
|
"vuex",
|
"js-cookie",
|
"@babel",
|
"resize-detector",
|
],
|
publicPath: "/",
|
outputDir: "dist",
|
assetsDir: "static",
|
// 在部分环境下 eslint-loader 会因配置解析失败直接导致构建中断
|
// 这里先关闭，确保项目可以正常运行；你后续再补齐 eslint 规则即可。
|
lintOnSave: false,
|
productionSourceMap: false,
|
devServer: {
|
// 让外部（例如 172.17.0.1）能访问开发服务
|
port: port,
|
open: false,
|
overlay: {
|
warnings: false,
|
errors: true,
|
},
|
// 本地代理：对比 Vite 的 proxy 配置思路，使用 vue-cli 的 proxy
|
// 由于本项目接口主要以 /api 开头，这里同时代理 /api 与 /dev-api。
|
proxy: {
|
// 项目实际请求一般是 /api/...，这里直接转发并保持 /api 前缀不变
|
"^/api": {
|
target: baseUrl,
|
changeOrigin: true,
|
},
|
},
|
},
|
|
configureWebpack: {
|
// provide the app's title in webpack's name field, so that
|
// it can be accessed in index.html to inject the correct title.
|
name: name,
|
resolve: {
|
alias: {
|
"@": resolve("src"),
|
},
|
},
|
plugins: [],
|
},
|
chainWebpack(config) {
|
config.entry.app = ["babel-polyfill", "./src/main.js"];
|
config.plugins.delete("preload"); // TODO: need test
|
config.plugins.delete("prefetch"); // TODO: need test
|
|
// set svg-sprite-loader
|
config.module
|
.rule("svg")
|
.exclude.add(resolve("src/icons"))
|
.end();
|
config.module
|
.rule("icons")
|
.test(/\.svg$/)
|
.include.add(resolve("src/icons"))
|
.end()
|
.use("svg-sprite-loader")
|
.loader("svg-sprite-loader")
|
.options({
|
symbolId: "icon-[name]",
|
})
|
.end();
|
|
// set preserveWhitespace
|
config.module
|
.rule("vue")
|
.use("vue-loader")
|
.loader("vue-loader")
|
.tap((options) => {
|
options.compilerOptions.preserveWhitespace = true;
|
return options;
|
})
|
.end();
|
|
config
|
// https://webpack.js.org/configuration/devtool/#development
|
.when(process.env.NODE_ENV === "development", (config) =>
|
config.devtool("cheap-source-map")
|
);
|
|
config.when(process.env.NODE_ENV !== "development", (config) => {
|
config
|
.plugin("ScriptExtHtmlWebpackPlugin")
|
.after("html")
|
.use("script-ext-html-webpack-plugin", [
|
{
|
// `runtime` must same as runtimeChunk name. default is `runtime`
|
inline: /runtime\..*\.js$/,
|
},
|
])
|
.end();
|
config.optimization.splitChunks({
|
chunks: "all",
|
cacheGroups: {
|
libs: {
|
name: "chunk-libs",
|
test: /[\\/]node_modules[\\/]/,
|
priority: 10,
|
chunks: "initial", // only package third parties that are initially dependent
|
},
|
elementUI: {
|
name: "chunk-elementUI", // split elementUI into a single package
|
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
|
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
|
},
|
commons: {
|
name: "chunk-commons",
|
test: resolve("src/components"), // can customize your rules
|
minChunks: 3, // minimum common number
|
priority: 5,
|
reuseExistingChunk: true,
|
},
|
},
|
});
|
config.optimization.runtimeChunk("single");
|
});
|
},
|
};
|
