mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-11 03:18:56 +08:00
refactor(decoration): 重构店铺装修组件配置并规范化环境变量
- 重构装修组件配置，新增 icon 与 group 分类字段 - 将组件"图片"重命名为"热区"，"图片轮播"重命名为"轮播图" - 新增搜索、公告、视频组件配置项 - 统一为各图片项添加 model 字段标识跳转模式 - 将装修页面组件间 pageGap 间距由 10 调整为 0 - 移除 im 模块中 VUE_APP_COMMON 变量，统一使用 VUE_APP_BUYER - 为 im 环境变量与配置文件添加详细注释说明
This commit is contained in:
pikachu1995@126.com
33
im/.env
33
im/.env
@@ -1,10 +1,37 @@
|
||||
# ==============================================================================
|
||||
# lilishop-im 生产环境默认环境变量配置
|
||||
# 执行 npm run build 进行生产打包时，默认会加载此文件中的环境变量
|
||||
# 注意：以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入客户端代码中
|
||||
# 变量修改后需要重新构建/运行项目方可生效
|
||||
#
|
||||
# 【协议提示】
|
||||
# - 线上生产环境配置了 SSL/HTTPS 证书时，WebSocket 使用 wss:// 协议
|
||||
# - 本地开发环境未配置 SSL 证书时，WebSocket 必须使用 ws:// 协议，否则会连接失败
|
||||
# ==============================================================================
|
||||
|
||||
# 当前运行环境模式：production (生产环境)
|
||||
NODE_ENV=production
|
||||
|
||||
# 是否开启预览模式 (true: 开启, false: 关闭)
|
||||
VUE_APP_PREVIEW=false
|
||||
|
||||
# IM 服务的 HTTP 接口请求基准地址 (用于登录认证、好友、群组、聊天记录查询等)
|
||||
VUE_APP_API_BASE_URL=https://im-api.pickmall.cn
|
||||
|
||||
# IM 服务的 WebSocket 实时通讯地址 (支持 ws:// 或 wss://，生产环境已配置 SSL 证书使用 wss://；本地无证书环境必须使用 ws://)
|
||||
VUE_APP_WEB_SOCKET_URL=wss://im-api.pickmall.cn/lili/webSocket
|
||||
VUE_APP_COMMON=https://buyer-api.pickmall.cn
|
||||
|
||||
# 买家端业务接口基准地址 (用于获取买家用户信息、商品信息、订单信息等)
|
||||
VUE_APP_BUYER=https://buyer-api.pickmall.cn
|
||||
VUE_APP_SELLER=https://store-api.pickmall.cn
|
||||
|
||||
# 商家端业务接口基准地址 (用于获取店铺资料、商家客服相关信息等)
|
||||
VUE_APP_SELLER=https://admin-api.pickmall.cn
|
||||
|
||||
# IM 网站/系统标题名称 (显示在浏览器标题栏与系统头部)
|
||||
VUE_APP_WEBSITE_NAME="LiLi IM"
|
||||
|
||||
# PC 端商城前台首页及商品详情跳转前缀地址 (点击聊天中的商品卡片时跳转)
|
||||
VUE_APP_PC_URL=https://pc-b2b2c.pickmall.cn/
|
||||
VUE_APP_PC_STORE=https://store-b2b2c.pickmall.cn/
|
||||
|
||||
# PC 端商家管理后台跳转前缀地址 (点击聊天中的订单信息时跳转商家端订单页面)
|
||||
VUE_APP_PC_STORE=https://store-b2b2c.pickmall.cn/
|
||||
|
||||
@@ -1,10 +1,44 @@
|
||||
# ==============================================================================
|
||||
# lilishop-im 本地开发环境配置文件
|
||||
# 执行 npm run serve 启动本地开发服务时，会优先加载此文件并覆盖 .env 中的同名变量
|
||||
# 注意：以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入客户端代码中
|
||||
# 变量修改后需要重新启动开发服务方可生效
|
||||
#
|
||||
# 【重要提示】
|
||||
# 1. 本地联调如果使用本地或局域网服务（如 127.0.0.1 / localhost），WebSocket 必须使用 ws:// 协议！
|
||||
# 例如: ws://127.0.0.1:8885/lili/webSocket
|
||||
# 切勿在无 SSL 证书的本地环境下使用 wss://，否则会导致 WebSocket 握手失败、聊天无法连通！
|
||||
# 2. 只有在线上域名并配置了 SSL/HTTPS 证书的情况下才使用 wss:// 协议。
|
||||
# ==============================================================================
|
||||
|
||||
# 当前运行环境模式：development (本地开发环境)
|
||||
NODE_ENV=development
|
||||
|
||||
# 是否开启预览模式 (true: 开启, false: 关闭)
|
||||
VUE_APP_PREVIEW=false
|
||||
|
||||
# IM 服务的 HTTP 接口请求基准地址
|
||||
# 线上演示示例: https://im-api.pickmall.cn
|
||||
# 本地联调示例: http://127.0.0.1:8885
|
||||
VUE_APP_API_BASE_URL=https://im-api.pickmall.cn
|
||||
|
||||
# IM 服务的 WebSocket 实时通讯地址
|
||||
# 【重要提示】本地联调未配置 SSL 证书时务必使用 ws:// 协议，切勿写成 wss://！
|
||||
# 本地联调推荐配置: ws://127.0.0.1:8885/lili/webSocket
|
||||
# 线上已配置证书时: wss://im-api.pickmall.cn/lili/webSocket
|
||||
VUE_APP_WEB_SOCKET_URL=wss://im-api.pickmall.cn/lili/webSocket
|
||||
VUE_APP_COMMON=https://buyer-api.pickmall.cn
|
||||
|
||||
# 买家端业务接口基准地址 (本地联调示例: http://127.0.0.1:8888)
|
||||
VUE_APP_BUYER=https://buyer-api.pickmall.cn
|
||||
VUE_APP_SELLER=https://store-api.pickmall.cn
|
||||
|
||||
# 商家端业务接口基准地址 (本地联调示例: http://127.0.0.1:8889)
|
||||
VUE_APP_SELLER=https://admin-api.pickmall.cn
|
||||
|
||||
# IM 网站/系统标题名称 (显示在浏览器标题栏与系统头部)
|
||||
VUE_APP_WEBSITE_NAME="LiLi IM"
|
||||
|
||||
# PC 端商城前台首页及商品详情跳转前缀地址 (点击聊天中的商品卡片时跳转)
|
||||
VUE_APP_PC_URL=https://pc-b2b2c.pickmall.cn/
|
||||
VUE_APP_PC_STORE=https://store-b2b2c.pickmall.cn/
|
||||
|
||||
# PC 端商家管理后台跳转前缀地址 (点击聊天中的订单信息时跳转商家端订单页面)
|
||||
VUE_APP_PC_STORE=https://store-b2b2c.pickmall.cn/
|
||||
|
||||
@@ -1,40 +1,58 @@
|
||||
/**
|
||||
* ==============================================================================
|
||||
* Babel 转译器配置文件 (babel.config.js)
|
||||
* ==============================================================================
|
||||
*
|
||||
* 主要功能：
|
||||
* 1. 采用 Vue CLI 官方预设进行现代 JavaScript (ES6+) 向下兼容转译
|
||||
* 2. 集成 PrismJS 插件，用于在 IM 聊天对话框中展示富文本代码块时的多语言语法高亮
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
// Vue CLI 官方 Babel 预设，自动包含常用语法转换与 polyfill 支持
|
||||
presets: ["@vue/cli-plugin-babel/preset"],
|
||||
|
||||
plugins: [
|
||||
/**
|
||||
* PrismJS 语法高亮插件配置
|
||||
* babel-plugin-prismjs: 按需加载 PrismJS 的语言包和样式主题，优化打包体积
|
||||
*/
|
||||
[
|
||||
"prismjs",
|
||||
{
|
||||
// 需要按需引入并支持语法高亮的编程/标记语言列表
|
||||
languages: [
|
||||
"html",
|
||||
"css",
|
||||
"less",
|
||||
"javascript",
|
||||
"typescript",
|
||||
"json",
|
||||
"xml",
|
||||
"bash",
|
||||
"nginx",
|
||||
"sql",
|
||||
"docker",
|
||||
"php",
|
||||
"java",
|
||||
"go",
|
||||
"python",
|
||||
"ruby",
|
||||
"rust",
|
||||
"objectivec",
|
||||
"c",
|
||||
"csharp",
|
||||
"cpp",
|
||||
"lua",
|
||||
"shell",
|
||||
"vim",
|
||||
"yaml",
|
||||
"yml",
|
||||
"md",
|
||||
"erlang",
|
||||
"ini",
|
||||
"html", // HTML 标记语言
|
||||
"css", // CSS 样式表
|
||||
"less", // Less 预处理样式
|
||||
"javascript", // JavaScript 脚本语言
|
||||
"typescript", // TypeScript
|
||||
"json", // JSON 数据格式
|
||||
"xml", // XML 文档
|
||||
"bash", // Bash 脚本
|
||||
"nginx", // Nginx 服务器配置文件
|
||||
"sql", // 数据库 SQL 语句
|
||||
"docker", // Dockerfile 配置
|
||||
"php", // PHP 语言
|
||||
"java", // Java 语言
|
||||
"go", // Go 语言
|
||||
"python", // Python 语言
|
||||
"ruby", // Ruby 语言
|
||||
"rust", // Rust 语言
|
||||
"objectivec", // Objective-C 语言
|
||||
"c", // C 语言
|
||||
"csharp", // C# 语言
|
||||
"cpp", // C++ 语言
|
||||
"lua", // Lua 脚本
|
||||
"shell", // Shell 命令行脚本
|
||||
"vim", // Vim 配置与脚本
|
||||
"yaml", // YAML 配置
|
||||
"yml", // YML 配置
|
||||
"md", // Markdown 文本
|
||||
"erlang", // Erlang 语言
|
||||
"ini", // INI 配置文件
|
||||
],
|
||||
// 代码高亮使用的默认主题 (采用深色风格的 okaidia 主题)
|
||||
theme: "okaidia",
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,18 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"dist"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
// ==============================================================================
|
||||
// JavaScript 项目语言服务配置文件 (jsconfig.json)
|
||||
// 用于指导 VS Code 等 IDE 进行代码跳转、智能提示和路径别名映射解析
|
||||
// ==============================================================================
|
||||
"compilerOptions": {
|
||||
// 指定编译后的 JavaScript 目标语言版本
|
||||
"target": "es6",
|
||||
// 解析非相对模块名称的基准目录（当前根目录）
|
||||
"baseUrl": ".",
|
||||
// 配置模块名到基于 baseUrl 的路径映射（与 vue.config.js 中的 webpack alias 保持一致）
|
||||
"paths": {
|
||||
// 将 @/* 映射至 src/*，以便在编辑器中编写 import ... from '@/...' 时支持快捷跳转
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
// 排除在代码智能索引和语法检查之外的目录
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"dist"
|
||||
],
|
||||
// 包含在智能提示与类型检查范围内的源文件匹配规则
|
||||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,30 +1,74 @@
|
||||
|
||||
/**
|
||||
* 读取公共配置API路径。
|
||||
* 工程会读取根目录下的 env 。
|
||||
* 根目录下的.env文件是用来定义环境变量的。
|
||||
* 它可以包含各种键值对，每个键代表一个环境变量。
|
||||
* 这些环境变量可以在应用程序的整个生命周期内使用，例如在代码中访问、配置webpack或在构建部署过程中使用不同的值。
|
||||
* env中的 ODE_ENV指定当前的环境。
|
||||
* 可以分别创建.env.development、.env.production等文件。
|
||||
* 默认.env 文件中的变量作为开发环境的环境变量。
|
||||
* env文件修改的话需要重新编译项目。
|
||||
* ==============================================================================
|
||||
* 全局业务配置文件
|
||||
* ==============================================================================
|
||||
*
|
||||
* 说明：
|
||||
* 1. 本文件整合并导出了项目运行所需的全局配置参数，统一由环境变量 process.env 读取。
|
||||
* 2. 环境变量定义在项目根目录下的 .env（生产）与 .env.development（开发）文件中。
|
||||
* 3. 只有以 VUE_APP_ 开头的环境变量才会被 Vue CLI 编译并暴露给前端客户端代码。
|
||||
* 4. 修改 .env 或 .env.development 文件后，必须重新启动开发服务或重新打包构建方可生效。
|
||||
*
|
||||
* 核心配置项包含：
|
||||
* - 站点名称
|
||||
* - 后端 IM 服务 API 接口与 WebSocket 实时通讯地址
|
||||
* - 买家端/商家端跨系统接口基准地址
|
||||
* - PC 端前台商城与商家端管理后台的外链跳转地址
|
||||
*/
|
||||
export default {
|
||||
// 网站名称
|
||||
/**
|
||||
* 站点/系统标题名称
|
||||
* 用于页面 document.title 设置及系统头部品牌展示
|
||||
* 默认值: "LiLi IM"
|
||||
*/
|
||||
WEBSITE_NAME: process.env.VUE_APP_WEBSITE_NAME || "LiLi IM",
|
||||
// 默认请求IM的API
|
||||
BASE_API_URL: process.env.VUE_APP_API_BASE_URL || "",
|
||||
// 默认请求的WS
|
||||
BASE_WS_URL: process.env.VUE_APP_WEB_SOCKET_URL || "",
|
||||
// 默认请求公有接口相关 API
|
||||
BASE_COMMON: process.env.VUE_APP_COMMON || "",
|
||||
// 默认请求用户相关API
|
||||
BASE_BUYER: process.env.VUE_APP_BUYER || "",
|
||||
// 默认请求卖家相关的API
|
||||
|
||||
/**
|
||||
* IM 专属后端 HTTP API 接口基准请求地址
|
||||
* 用于 Axios 请求实例 (如获取会话历史、发送单聊/群聊富文本、撤回消息、好友列表等)
|
||||
* 对应环境变量: VUE_APP_API_BASE_URL
|
||||
*/
|
||||
BASE_API_URL: process.env.VUE_APP_API_BASE_URL || "",
|
||||
|
||||
/**
|
||||
* IM 实时通讯 WebSocket 连接基准地址
|
||||
* 用于前端与后端建立长连接，实时收发在线聊天消息、输入状态提示、系统通知等
|
||||
*
|
||||
* 【重要提示】协议选用原则：
|
||||
* - 本地开发/联调环境（无 SSL 证书）必须使用 "ws://" 协议（如 ws://127.0.0.1:8885/lili/webSocket），切勿写成 wss:// 导致握手失败！
|
||||
* - 生产/线上环境配置了 HTTPS/SSL 证书时，必须使用 "wss://" 协议（如 wss://im-api.pickmall.cn/lili/webSocket）
|
||||
*
|
||||
* 对应环境变量: VUE_APP_WEB_SOCKET_URL
|
||||
*/
|
||||
BASE_WS_URL: process.env.VUE_APP_WEB_SOCKET_URL || "",
|
||||
|
||||
/**
|
||||
* 买家端 (Buyer) 接口基准地址
|
||||
* 用于在聊天窗口中查询买家用户信息、买家端商品详情、买家订单卡片数据等
|
||||
* 对应环境变量: VUE_APP_BUYER
|
||||
*/
|
||||
BASE_BUYER: process.env.VUE_APP_BUYER || "",
|
||||
|
||||
/**
|
||||
* 商家端/卖家端 (Seller) 接口基准地址
|
||||
* 用于获取当前店铺信息、客服坐席列表、商家端关联配置等
|
||||
* 对应环境变量: VUE_APP_SELLER
|
||||
*/
|
||||
BASE_SELLER: process.env.VUE_APP_SELLER || "",
|
||||
// 点击商品跳转到的地址
|
||||
|
||||
/**
|
||||
* PC 买家端商城首页/商品详情页面跳转基准前缀
|
||||
* 当用户在聊天窗口中点击商品链接或商品卡片时，在新窗口打开对应的商城商品详情页
|
||||
* 默认值: "https://pc-b2b2c.pickmall.cn"
|
||||
* 对应环境变量: VUE_APP_PC_URL
|
||||
*/
|
||||
PC_URL: process.env.VUE_APP_PC_URL || "https://pc-b2b2c.pickmall.cn",
|
||||
// 订单跳转商家订单页面
|
||||
PC_STORE: process.env.VUE_APP_PC_STORE || 'https://store-b2b2c.pickmall.cn',
|
||||
|
||||
/**
|
||||
* PC 商家管理后台跳转基准前缀
|
||||
* 当客服人员在聊天面板中点击买家咨询的订单卡片时，跳转至商家管理后台对应的订单详情页
|
||||
* 默认值: "https://store-b2b2c.pickmall.cn"
|
||||
* 对应环境变量: VUE_APP_PC_STORE
|
||||
*/
|
||||
PC_STORE: process.env.VUE_APP_PC_STORE || "https://store-b2b2c.pickmall.cn",
|
||||
};
|
||||
|
||||
@@ -154,7 +154,7 @@ export const del = (url, data = {}, options = {}) => {
|
||||
*/
|
||||
export const upload = (url, data = {}, options = {}) => {
|
||||
return request({
|
||||
url: config.BASE_COMMON + url,
|
||||
url: config.BASE_BUYER + url,
|
||||
method: "post",
|
||||
data: data,
|
||||
...options,
|
||||
|
||||
133
im/vue.config.js
133
im/vue.config.js
@@ -1,58 +1,118 @@
|
||||
/**
|
||||
* ==============================================================================
|
||||
* Vue CLI 配置文件 (vue.config.js)
|
||||
* ==============================================================================
|
||||
*
|
||||
* 官方文档: https://cli.vuejs.org/zh/config/
|
||||
* 主要配置功能：
|
||||
* 1. 部署子路径与打包输出目录设置
|
||||
* 2. 本地开发服务器 (devServer) 端口及代理跨域规则
|
||||
* 3. Gzip 打包压缩插件 (CompressionWebpackPlugin) 配置
|
||||
* 4. SVG 图标雪碧图 (svg-sprite-loader) 解析
|
||||
* 5. 全局 Less 样式变量自动注入 (style-resources-loader)
|
||||
* 6. 构建优化与 SourceMap 控制
|
||||
*/
|
||||
|
||||
const path = require('path')
|
||||
|
||||
// compression-webpack-plugin，添加压缩文件类型
|
||||
// 引入 Gzip 压缩插件，用于生产环境减小打包产物体积，提升加载速度
|
||||
const CompressionWebpackPlugin = require('compression-webpack-plugin')
|
||||
|
||||
// 需要进行 Gzip 压缩的文件后缀类型
|
||||
const productionGzipExtensions = ['js', 'css']
|
||||
|
||||
// 判断当前是否为生产构建环境
|
||||
const isProd = process.env.NODE_ENV === 'production'
|
||||
|
||||
/**
|
||||
* 路径转换辅助函数：将相对路径转换为绝对路径
|
||||
* @param {string} dir 相对 src 或根目录的路径
|
||||
* @returns {string} 绝对路径
|
||||
*/
|
||||
function resolve(dir) {
|
||||
return path.join(__dirname, dir)
|
||||
}
|
||||
|
||||
// vue.config.js
|
||||
const vueConfig = {
|
||||
// 公共路径(必须有的)
|
||||
/**
|
||||
* 部署应用包时的基本 URL (部署路径)
|
||||
* 默认使用根路径 '/'，若部署在二级子目录下（例如 '/im/'），可通过环境变量 VUE_APP_PUBLIC_PATH 指定
|
||||
*/
|
||||
publicPath: process.env.VUE_APP_PUBLIC_PATH || '/',
|
||||
// 输出文件目录
|
||||
|
||||
/**
|
||||
* 生产环境构建输出文件的目录名称 (执行 npm run build 后的打包产物目录)
|
||||
*/
|
||||
outputDir: 'dist',
|
||||
// 静态资源存放的文件夹(相对于ouputDir)
|
||||
|
||||
/**
|
||||
* 放置生成的静态资源 (js、css、img、fonts) 的相对于 outputDir 的目录
|
||||
*/
|
||||
assetsDir: 'static',
|
||||
|
||||
/**
|
||||
* 是否使用包含运行时编译器的 Vue 构建版本
|
||||
* 设置为 false 可以减少打包体积约 10KB
|
||||
*/
|
||||
runtimeCompiler: false,
|
||||
|
||||
/**
|
||||
* 本地开发服务器配置
|
||||
*/
|
||||
devServer: {
|
||||
// 本地开发运行端口号，默认为 8000
|
||||
port: 8000,
|
||||
|
||||
/**
|
||||
* 本地开发跨域代理配置 (Proxy)
|
||||
* 若本地直接请求后端 API 遇到跨域 (CORS) 限制，可在此开启反向代理
|
||||
*/
|
||||
// proxy: {
|
||||
// //配置跨域
|
||||
// '/api': {
|
||||
// target: 'http://api.xxxx.com', // 后台接口域名
|
||||
// ws: false, //如果要代理 websockets，配置这个参数
|
||||
// secure: false, // 如果是https接口，需要配置这个参数
|
||||
// changeOrigin: true, //是否跨域
|
||||
// target: 'http://127.0.0.1:8885', // 后台 IM 接口域名或 IP
|
||||
// ws: true, // 是否代理 websockets
|
||||
// secure: false, // 若为 https 自签名证书接口设为 false
|
||||
// changeOrigin: true, // 是否允许跨域改变 host 来源
|
||||
// pathRewrite: {
|
||||
// '^/api': '/api',
|
||||
// '^/api': '/api', // 路径重写规则
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
|
||||
/**
|
||||
* Webpack 原生对象式配置
|
||||
*/
|
||||
configureWebpack: {
|
||||
// webpack plugins
|
||||
// Webpack 插件列表
|
||||
plugins: [
|
||||
// 配置大文件压缩相关参数
|
||||
/**
|
||||
* 配置 Gzip 压缩插件
|
||||
* 对体积大于 10KB 的 JS/CSS 文件生成对应的 .gz 预压缩文件
|
||||
* 需配合 Nginx 的 gzip_static on 指令直接下发，减少服务器 CPU 动态压缩消耗
|
||||
*/
|
||||
new CompressionWebpackPlugin({
|
||||
filename: '[path][base].gz',
|
||||
algorithm: 'gzip',
|
||||
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
|
||||
threshold: 10240,
|
||||
minRatio: 0.8,
|
||||
filename: '[path][base].gz', // 压缩后的文件命名规则
|
||||
algorithm: 'gzip', // 压缩算法
|
||||
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配要压缩的文件类型
|
||||
threshold: 10240, // 仅对超过 10KB 的资源进行压缩 (单位: 字节)
|
||||
minRatio: 0.8, // 只有压缩率好于 0.8 时才生成压缩文件
|
||||
}),
|
||||
],
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Webpack 链式配置 (Chain Webpack)，细粒度修改内部 loader 与规则
|
||||
*/
|
||||
chainWebpack: config => {
|
||||
// 1. 配置路径别名：设置 '@' 指向 'src' 目录，便于在代码中快速引入组件和工具库
|
||||
config.resolve.alias.set('@', resolve('src'))
|
||||
|
||||
// 2. 配置内置 svg 规则：排除 src/icons/svg 目录，避免与下面的 svg-sprite-loader 冲突
|
||||
config.module.rule('svg').exclude.add(resolve('src/icons/svg')).end()
|
||||
|
||||
// 3. 配置自定义 svg-icon 规则：将 src/icons/svg 下的 SVG 文件打包为 SVG Sprite 雪碧图
|
||||
// 可以在项目中使用 <svg-icon icon-class="icon-name" /> 统一渲染矢量图标
|
||||
config.module
|
||||
.rule('icons')
|
||||
.test(/\.svg$/)
|
||||
@@ -61,35 +121,54 @@ const vueConfig = {
|
||||
.use('svg-sprite-loader')
|
||||
.loader('svg-sprite-loader')
|
||||
.options({
|
||||
symbolId: 'icon-[name]',
|
||||
symbolId: 'icon-[name]', // 生成的 symbol ID 命名规则
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 第三方插件配置项
|
||||
*/
|
||||
pluginOptions: {
|
||||
// 自动在所有单文件组件中引入 Less 全局变量，无需在每个 .vue 文件手动 @import
|
||||
'style-resources-loader': {
|
||||
preProcessor: 'less',
|
||||
patterns: [
|
||||
//全局加载 less 变量
|
||||
// 全局 Less 主题变量文件绝对路径
|
||||
path.resolve(__dirname, './src/assets/css/variable.less'),
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* CSS 预处理器相关配置
|
||||
*/
|
||||
css: {
|
||||
loaderOptions: {
|
||||
less: {
|
||||
lessOptions: {
|
||||
modifyVars: {},
|
||||
javascriptEnabled: true,
|
||||
modifyVars: {}, // Less 变量覆盖
|
||||
javascriptEnabled: true, // 允许 Less 中执行 JavaScript 表达式 (Ant Design / 部分组件库必需)
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// 是否为生产环境构建生成 source map？
|
||||
/**
|
||||
* 是否为生产环境构建生成 Source Map
|
||||
* 设置为 false 可以大幅加速生产打包速度，并防止源码泄露
|
||||
*/
|
||||
productionSourceMap: false,
|
||||
// lintOnSave: undefined,
|
||||
|
||||
/**
|
||||
* 是否在保存代码时通过 eslint-loader 执行检查
|
||||
* 设置为 false 关闭保存时的编译中断
|
||||
*/
|
||||
lintOnSave: false,
|
||||
// babel-loader no-ignore node_modules/*
|
||||
|
||||
/**
|
||||
* 默认情况下 babel-loader 会忽略所有 node_modules 中的文件
|
||||
* 若依赖库使用了 ES6+ 特性需要被转译，可在此数组中显式配置该依赖名称
|
||||
*/
|
||||
transpileDependencies: [],
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user