feat(页面配置、开发相关):

This commit is contained in:
fuhao 2024-09-03 15:14:26 +08:00
parent 2a4525c2d7
commit 3f50e4bf2b
No known key found for this signature in database
9 changed files with 560 additions and 226 deletions

2
.gitignore vendored
View File

@ -51,6 +51,8 @@ logs
doc doc
bin bin
.github .github
protocolFile
nginx
ry.bat ry.bat
/LICENSE /LICENSE

View File

@ -0,0 +1,53 @@
import request from '@/utils/request'
// 查询计划发布中的类型列表
export function listType(query) {
return request({
url: '/plan/type/list',
method: 'get',
params: query
})
}
// 查询计划发布中的类型详细
export function getType(id) {
return request({
url: '/plan/type/' + id,
method: 'get'
})
}
// 新增计划发布中的类型
export function addType(data) {
return request({
url: '/plan/type',
method: 'post',
data: data
})
}
// 修改计划发布中的类型
export function updateType(data) {
return request({
url: '/plan/type',
method: 'put',
data: data
})
}
// 删除计划发布中的类型
export function delType(id) {
return request({
url: '/plan/type/' + id,
method: 'delete'
})
}
// 查询部门下拉树结构
export function planTypeTreeSelect() {
return request({
url: '/plan/type/planTree',
method: 'get'
})
}

View File

@ -0,0 +1,106 @@
<template>
<div>
<!-- 调整缩放比例的控件 -->
<el-form label-position="left" label-width="70px">
<el-form-item label="缩放比例">
<el-row :gutter="20" align="middle">
<el-col :span="10">
<el-slider
v-model="scale"
:min="0.5"
:max="3"
:step="0.5"
show-input
input-size="mini"
/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="文字预览">
<div :style="containerStyle">
<span :style="textStyle">
{{ content }}
</span>
</div>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
scale: 1, //
};
},
props: {
fontStyle: {
type: String,
default: 'normal',
},
fontColor: {
type: String,
default: '#ff0000', //
},
fontSize: {
type: Number,
default: 16,
},
letterSpacing: {
type: Number,
default: 0,
},
fontX: {
type: Number,
default: 0,
},
fontY: {
type: Number,
default: 0,
},
backgroundWidth: {
type: Number,
default: 320,
},
backgroundHeight: {
type: Number,
default: 160,
},
lineHeight: {
type: Number,
default: 1, // 1
},
content: {
type: String,
default: '这里是示例内容,哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
},
},
computed: {
containerStyle() {
return {
width: `${this.backgroundWidth * this.scale}px`,
height: `${this.backgroundHeight * this.scale}px`,
position: 'relative',
background: '#000000',
overflow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
};
},
textStyle() {
return {
position: 'absolute',
top: `${-this.fontY * this.scale}px`,
left: `${this.fontX * this.scale}px`,
fontStyle: this.fontStyle,
color: this.fontColor,
fontSize: `${this.fontSize * this.scale}px`,
letterSpacing: `${this.letterSpacing * this.scale}px`,
lineHeight: `${this.lineHeight}`,
};
},
},
};
</script>

View File

@ -22,9 +22,9 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="类型" prop="type"> <el-form-item label="信息类型" prop="type">
<el-select <el-select
v-model="queryParams.type" v-model="queryParams.infoType"
clearable clearable
placeholder="全部" placeholder="全部"
> >
@ -75,16 +75,16 @@
v-hasPermi="['board:content:remove']" v-hasPermi="['board:content:remove']"
>删除</el-button> >删除</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <!-- <el-col :span="1.5">-->
<el-button <!-- <el-button-->
type="warning" <!-- type="warning"-->
plain <!-- plain-->
icon="el-icon-download" <!-- icon="el-icon-download"-->
size="mini" <!-- size="mini"-->
@click="handleExport" <!-- @click="handleExport"-->
v-hasPermi="['board:content:export']" <!-- v-hasPermi="['board:content:export']"-->
>导出</el-button> <!-- >导出</el-button>-->
</el-col> <!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
@ -138,7 +138,7 @@
/> />
<!-- 添加或修改预置信息及模版对话框 --> <!-- 添加或修改预置信息及模版对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="auto"> <el-form ref="form" :model="form" :rules="rules" label-width="auto">
<el-form-item label="预置信息名称" prop="name"> <el-form-item label="预置信息名称" prop="name">
<el-input v-model="form.name" placeholder="请输入预置信息名称" /> <el-input v-model="form.name" placeholder="请输入预置信息名称" />
@ -199,7 +199,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="字体大小" prop="fontSize"> <el-form-item label="字体大小" prop="fontSize">
<el-input-number :min="0" v-model="form.fontSize" placeholder="请输入字体大小" /> <el-input-number :min="20" :max="50" v-model="form.fontSize" placeholder="请输入字体大小" />
</el-form-item> </el-form-item>
<el-form-item label="字体间距" prop="letterSpacing"> <el-form-item label="字体间距" prop="letterSpacing">
<el-input-number :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" /> <el-input-number :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" />
@ -213,11 +213,18 @@
<el-form-item label="播放时间" prop="playTime"> <el-form-item label="播放时间" prop="playTime">
<el-input-number :min="0" v-model="form.playTime" placeholder="请输入播放时间" /> <el-input-number :min="0" v-model="form.playTime" placeholder="请输入播放时间" />
</el-form-item> </el-form-item>
<el-form-item label="预览路径" prop="previewPath"> <text-preview
<el-input v-model="form.previewPath" placeholder="请输入预览路径" /> fontStyle="SongTi"
</el-form-item> :fontSize="form.fontSize"
:letterSpacing="form.letterSpacing"
:fontX="form.fontPositionX"
:fontY="form.fontPositionY"
:backgroundWidth="bgSize.width"
:backgroundHeight="bgSize.height"
:lineHeight="1"
:content="form.content" />
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button> <el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button> <el-button @click="cancel"> </el-button>
@ -228,9 +235,11 @@
<script> <script>
import { listContent, getContent, delContent, addContent, updateContent } from "@/api/board/content"; import { listContent, getContent, delContent, addContent, updateContent } from "@/api/board/content";
import TextPreview from "@/views/board/component/TextPreview.vue";
export default { export default {
name: "Content", name: "Content",
components: {TextPreview},
dicts: ['board_size','font_color','font_style', 'alert_type'], dicts: ['board_size','font_color','font_style', 'alert_type'],
data() { data() {
return { return {
@ -334,6 +343,15 @@ export default {
created() { created() {
this.getList(); this.getList();
}, },
computed:{
bgSize() {
if (!this.form.boardSize) {
return {width: 320, height:160}
}
let [height, width] = this.form.boardSize.split("*").map(Number);
return {width, height}
},
},
methods: { methods: {
/** 查询预置信息及模版列表 */ /** 查询预置信息及模版列表 */
getList() { getList() {

View File

@ -98,17 +98,17 @@
>删除 >删除
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <!-- <el-col :span="1.5">-->
<el-button <!-- <el-button-->
type="warning" <!-- type="warning"-->
plain <!-- plain-->
icon="el-icon-download" <!-- icon="el-icon-download"-->
size="mini" <!-- size="mini"-->
@click="handleExport" <!-- @click="handleExport"-->
v-hasPermi="['board:info:export']" <!-- v-hasPermi="['board:info:export']"-->
>导出 <!-- >导出-->
</el-button> <!-- </el-button>-->
</el-col> <!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
@ -228,11 +228,12 @@ import {listInfo, getInfo, delInfo, addInfo, updateInfo} from "@/api/board/info"
import {deptTreeSelect} from "@/api/system/user"; import {deptTreeSelect} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import TextPreview from "@/views/board/component/TextPreview.vue";
export default { export default {
name: "Info", name: "Info",
dicts: ['board_size', 'board_protocol'], dicts: ['board_size', 'board_protocol'],
components: {Treeselect}, components: {TextPreview, Treeselect},
data() { data() {
return { return {
// //

View File

@ -1,56 +1,22 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="auto"> <el-row :gutter="20">
<el-form-item label="等级" prop="level"> <el-col :span="4" :xs="24">
<el-select <div class="head-container">
v-model="queryParams.level"
clearable
placeholder="全部"
>
<el-option
v-for="dict in dict.type.alert_level"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select
v-model="queryParams.type"
clearable
placeholder="全部"
>
<el-option
v-for="dict in dict.type.alert_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="最大值" prop="maxValue">
<el-input <el-input
v-model="queryParams.maxValue" v-model="searchValue"
placeholder="请输入最大值" placeholder="请输入名称"
clearable clearable
@keyup.enter.native="handleQuery" size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/> />
</el-form-item> </div>
<el-form-item label="最小值" prop="minValue"> <div class="head-container">
<el-input <plan-type-tree @node-clicked="handleNodeClick" :search-value="searchValue" />
v-model="queryParams.minValue" </div>
placeholder="请输入最小值" </el-col>
clearable <el-col :span="20" :xs="24">
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
@ -84,32 +50,23 @@
v-hasPermi="['board:plan:remove']" v-hasPermi="['board:plan:remove']"
>删除</el-button> >删除</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <!-- <el-col :span="1.5">-->
<el-button <!-- <el-button-->
type="warning" <!-- type="warning"-->
plain <!-- plain-->
icon="el-icon-download" <!-- icon="el-icon-download"-->
size="mini" <!-- size="mini"-->
@click="handleExport" <!-- @click="handleExport"-->
v-hasPermi="['board:plan:export']" <!-- v-hasPermi="['board:plan:export']"-->
>导出</el-button> <!-- >导出</el-button>-->
</el-col> <!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="planList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="planList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="唯一编号" align="center" prop="id" /> <el-table-column label="唯一编号" align="center" prop="id" />
<el-table-column label="类型" align="center" prop="type"> <el-table-column label="类型" align="center" prop="typeName" />
<template slot-scope="scope"> <el-table-column label="等级" align="center" prop="level" />
<dict-tag :options="dict.type.alert_type" :value="scope.row.type"/>
</template>
</el-table-column>
<el-table-column label="等级" align="center" prop="level">
<template slot-scope="scope">
<dict-tag :options="dict.type.alert_level" :value="scope.row.level"/>
</template>
</el-table-column>
<el-table-column label="最大值" align="center" prop="maxValue" /> <el-table-column label="最大值" align="center" prop="maxValue" />
<el-table-column label="最小值" align="center" prop="minValue" /> <el-table-column label="最小值" align="center" prop="minValue" />
<el-table-column label="显示内容" align="center" prop="displayContent" /> <el-table-column label="显示内容" align="center" prop="displayContent" />
@ -139,36 +96,17 @@
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
@pagination="getList" @pagination="getList"
/> />
</el-col>
</el-row>
<!-- 添加或修改警报计划对话框 --> <!-- 添加或修改警报计划对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="等级" prop="level"> <el-form-item label="等级" prop="level">
<el-select <el-input v-model="form.level" placeholder="请输入等级" />
v-model="form.level"
placeholder="全部"
:value="1"
>
<el-option
v-for="dict in dict.type.alert_level"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="类型" prop="type"> <el-form-item label="类型" prop="typeName">
<el-select <el-input v-model="clickNodeData.label" disabled />
v-model="form.type"
placeholder="全部"
>
<el-option
v-for="dict in dict.type.alert_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="最小值" prop="minValue"> <el-form-item label="最小值" prop="minValue">
<el-input-number :min="0" :precision="2" v-model="form.minValue" placeholder="请输入最小值" /> <el-input-number :min="0" :precision="2" v-model="form.minValue" placeholder="请输入最小值" />
@ -190,12 +128,16 @@
<script> <script>
import { listPlan, getPlan, delPlan, addPlan, updatePlan } from "@/api/board/plan"; import { listPlan, getPlan, delPlan, addPlan, updatePlan } from "@/api/board/plan";
import PlanTypeTree from "@/views/board/plan/planTypeTree.vue";
import {planTypeTreeSelect} from "@/api/board/plantype";
export default { export default {
name: "Plan", name: "Plan",
components: {PlanTypeTree},
dicts: ['alert_level','alert_type'], dicts: ['alert_level','alert_type'],
data() { data() {
return { return {
searchValue: "",
// //
loading: true, loading: true,
// //
@ -224,6 +166,10 @@ export default {
minValue: null, minValue: null,
displayContent: null displayContent: null
}, },
clickNodeData: {
id: 0,
label: "",
},
// //
form: {}, form: {},
// //
@ -247,7 +193,7 @@ export default {
}; };
}, },
created() { created() {
this.getList(); this.getPlanTypeTree();
}, },
methods: { methods: {
/** 查询警报计划列表 */ /** 查询警报计划列表 */
@ -304,8 +250,6 @@ export default {
const id = row.id || this.ids const id = row.id || this.ids
getPlan(id).then(response => { getPlan(id).then(response => {
this.form = response.data; this.form = response.data;
this.form.type += '';
this.form.level += '';
this.open = true; this.open = true;
this.title = "修改警报计划"; this.title = "修改警报计划";
}); });
@ -321,6 +265,7 @@ export default {
this.getList(); this.getList();
}); });
} else { } else {
this.form.type = this.clickNodeData.id;
addPlan(this.form).then(response => { addPlan(this.form).then(response => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess("新增成功");
this.open = false; this.open = false;
@ -346,10 +291,18 @@ export default {
...this.queryParams ...this.queryParams
}, `plan_${new Date().getTime()}.xlsx`) }, `plan_${new Date().getTime()}.xlsx`)
}, },
/** 字典翻译 */ handleNodeClick(data) {
dictAlertPlanTypeFormat(){ this.clickNodeData = data;
this.queryParams.type = data.id;
} this.handleQuery();
} },
getPlanTypeTree() {
planTypeTreeSelect().then(response => {
this.clickNodeData = response.data[0].children[0];
this.queryParams.type = response.data[0].children[0].id;
this.getList();
});
},
},
}; };
</script> </script>

View File

@ -0,0 +1,200 @@
<template>
<div>
<el-tree
:data="planTypeOptions"
node-key="id"
:props="defaultProps"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
:expand-on-click-node="false"
ref="tree"
default-expand-all
highlight-current
>
<template #default="{ node, data }">
<div class="custom-tree-node">
<span>{{ data.label }}</span>
<span class="custom-tree-node-btns">
<el-button
type="text"
icon="el-icon-plus"
@click="handleAdd(node, data)"
></el-button>
<el-button
type="text"
icon="el-icon-minus"
@click="handleDelete(node, data)"
></el-button>
</span>
</div>
</template>
</el-tree>
<!-- 新增节点对话框 -->
<el-dialog
title="新增节点"
:visible.sync="dialogVisible">
<el-form :model="form" label-width="auto">
<el-form-item label="类型名称">
<el-row>
<el-col :span="8">
<el-input v-model="form.label"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="节点类型">
<el-row>
<el-col :span="8">
<el-select v-model="form.addType">
<el-option
v-for="item in [{label: '同级',value: true},{label: '子级',value: false},]"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmAdd">确定</el-button>
</div>
</el-dialog>
<!-- 删除确认框 -->
<el-dialog
title="确认删除"
:visible.sync="deleteDialogVisible"
>
<span>确定删除节点 "{{ selectedNodeLabel }}" </span>
<div slot="footer" class="dialog-footer">
<el-button @click="deleteDialogVisible = false">取消</el-button>
<el-button type="danger" @click="confirmDelete">删除</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {addType, delType, planTypeTreeSelect} from "@/api/board/plantype";
export default {
name: "PlanTypeTree",
watch: {
//
searchValue(val) {
this.$refs.tree.filter(val);
},
},
props: {
searchValue: {
type: String,
default: "",
}
},
data() {
return {
planTypeOptions: undefined,
treeData: [],
dialogVisible: false,
deleteDialogVisible: false,
form: {
label: "",
addType: true,
selectedNodeId: 0,
selectedNodeLevel: 0,
selectedNodeParentId: 0,
},
parentNodeLabel: "",
selectedNode: null,
selectedNodeLabel: "",
defaultProps: {
children: "children",
label: "label",
},
};
},
methods: {
handleAdd(node, data) {
this.selectedNode = node;
this.parentNodeLabel = data.label;
this.dialogVisible = true;
},
confirmAdd() {
let addObj = {
typeName: this.form.label,
parentId: this.form.selectedNodeId,
}
if (this.form.addType === true) {
addObj.parentId = this.form.selectedNodeLevel === 1 ? 0 : this.form.selectedNodeParentId;
}
addType(addObj).then(resp => {
this.$modal.msgSuccess("新增成功");
this.getPlanTypeTree();
})
this.dialogVisible = false;
},
handleDelete(node, data) {
this.selectedNode = node;
this.selectedNodeLabel = data.label;
this.deleteDialogVisible = true;
},
confirmDelete() {
delType(this.form.selectedNodeId).then(resp => {
this.$modal.msgSuccess("删除成功");
this.getPlanTypeTree();
})
this.deleteDialogVisible = false;
},
handleNodeClick(data, node) {
if (node.level < 2) {
return;
}
this.$emit('node-clicked', data);
this.form.selectedNodeId = data.id;
this.form.selectedNodeLevel = node.level;
if (node.level === 1) {
this.form.selectedNodeParentId = 0;
} else {
this.form.selectedNodeParentId = node.parent.data.id;
}
},
/** 查询类型下拉树结构 */
getPlanTypeTree() {
planTypeTreeSelect().then(response => {
this.planTypeOptions = response.data;
});
},
//
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
},
created() {
this.getPlanTypeTree();
},
};
</script>
<style scoped>
.custom-tree-node {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
position: relative;
}
.custom-tree-node-btns {
display: none;
position: absolute;
right: 0;
}
.custom-tree-node:hover .custom-tree-node-btns {
display: flex;
}
</style>

View File

@ -1,33 +1,34 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="20"> <h1>瓷器活发布系统</h1>
<!--部门数据--> <!-- <el-row :gutter="20">-->
<el-col :span="4" :xs="24"> <!-- &lt;!&ndash;部门数据&ndash;&gt;-->
<div class="head-container"> <!-- <el-col :span="4" :xs="24">-->
<el-input <!-- <div class="head-container">-->
v-model="deptName" <!-- <el-input-->
placeholder="请输入部门名称" <!-- v-model="deptName"-->
clearable <!-- placeholder="请输入部门名称"-->
size="small" <!-- clearable-->
prefix-icon="el-icon-search" <!-- size="small"-->
style="margin-bottom: 20px" <!-- prefix-icon="el-icon-search"-->
/> <!-- style="margin-bottom: 20px"-->
</div> <!-- />-->
<div class="head-container"> <!-- </div>-->
<el-tree <!-- <div class="head-container">-->
:data="deptOptions" <!-- <el-tree-->
:props="defaultProps" <!-- :data="deptOptions"-->
:expand-on-click-node="false" <!-- :props="defaultProps"-->
:filter-node-method="filterNode" <!-- :expand-on-click-node="false"-->
ref="tree" <!-- :filter-node-method="filterNode"-->
node-key="id" <!-- ref="tree"-->
default-expand-all <!-- node-key="id"-->
highlight-current <!-- default-expand-all-->
@node-click="handleNodeClick" <!-- highlight-current-->
/> <!-- @node-click="handleNodeClick"-->
</div> <!-- />-->
</el-col> <!-- </div>-->
</el-row> <!-- </el-col>-->
<!-- </el-row>-->
</div> </div>
</template> </template>

View File

@ -9,7 +9,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '瓷器活发布系统' // 网页标题 const name = process.env.VUE_APP_TITLE || '瓷器活发布系统' // 网页标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口 const port = process.env.port || process.env.npm_config_port || 8888 // 端口
// vue.config.js 配置说明 // vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions