登录页面重构

master
许宏杰 2 months ago
parent 4b7b3d395b
commit e6e1900e5a

@ -1,11 +1,12 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 人口数据管理系统
# 开发环境配置
ENV = 'development'
# 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# 政务网/开发环境
VUE_APP_BASE_API_HTML = "http://122.193.93.182:19002"
VUE_APP_BASE_API = 'http://122.193.93.182:19002'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

@ -1,8 +1,8 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 人口数据管理系统
# 生产环境配置
ENV = 'production'
# 若依管理系统/生产环境
# 人口数据管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'

@ -1,10 +1,10 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 人口数据管理系统
NODE_ENV = production
# 测试环境配置
ENV = 'staging'
# 若依管理系统/测试环境
# 人口数据管理系统/测试环境
VUE_APP_BASE_API = '/stage-api'

@ -1,7 +1,7 @@
{
"name": "ruoyi",
"version": "3.8.8",
"description": "若依管理系统",
"description": "人口数据管理系统",
"author": "若依",
"license": "MIT",
"scripts": {
@ -37,6 +37,7 @@
},
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"autofit.js": "^3.1.1",
"axios": "0.28.1",
"clipboard": "2.0.8",
"core-js": "3.37.1",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 17 KiB

@ -7,18 +7,30 @@
<script>
import ThemePicker from "@/components/ThemePicker";
import autofit from "autofit.js";
export default {
mounted() {
autofit.init({
designHeight: 1080,
designWidth: 1920,
renderDom: "#app",
resize: true,
});
},
name: "App",
components: { ThemePicker },
metaInfo() {
return {
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
titleTemplate: title => {
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
}
}
}
title:
this.$store.state.settings.dynamicTitle &&
this.$store.state.settings.title,
titleTemplate: (title) => {
return title
? `${title} - ${process.env.VUE_APP_TITLE}`
: process.env.VUE_APP_TITLE;
},
};
},
};
</script>
<style scoped>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

@ -0,0 +1,53 @@
@font-face {
font-family: "Alibaba-PuHuiTi-Bold.otf";
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Bold.otf");
}
@font-face {
font-family: "Alibaba-PuHuiTi-Heavy.otf";
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Heavy.otf");
}
@font-face {
font-family: "Alibaba-PuHuiTi-Light.otf";
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Light.otf");
}
@font-face {
font-family: "Alibaba-PuHuiTi-Medium.otf";
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Medium.otf");
}
@font-face {
font-family: "Alibaba-PuHuiTi-Regular.otf";
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
}
@font-face {
font-family: "DIN-Condensed-Bold-2.ttf";
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/DIN-Condensed-Bold-2.ttf");
}
@font-face {
font-family: "DIN-Medium-2.otf";
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/DIN-Medium-2.otf");
}
@font-face {
font-family: "xiniu";
src: url("./font/xiniu.TTF");
}
@font-face {
font-family: "DIN-Regular-2.otf";
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/DIN-Regular-2.otf");
}
@font-face {
font-family: "din-bold-2.ttf";
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/din-bold-2.ttf");
}
@font-face {
font-family: "BY";
src: url("http://www.jichuanglanhai.com/demo/font-file/兮妞中黑体.TTF");
}
@font-face {
font-family: "DS-Digital";
src: url("http://www.jichuanglanhai.com/demo/font-file/DS-DIGI.TTF");
}
@font-face {
font-family: "PangMenZhengDao-Regular";
src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/PangMenZhengDaoBiaoTiTi-1.ttf");
}

Binary file not shown.

@ -1,16 +1,18 @@
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';
@import "./variables.scss";
@import "./mixin.scss";
@import "./transition.scss";
@import "./element-ui.scss";
@import "./sidebar.scss";
@import "./btn.scss";
@import "./font.css";
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Arial, sans-serif;
}
label {
@ -104,7 +106,8 @@ aside {
display: block;
line-height: 32px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -134,7 +137,7 @@ aside {
}
.text-center {
text-align: center
text-align: center;
}
.sub-navbar {
@ -145,7 +148,13 @@ aside {
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
background: linear-gradient(
90deg,
rgba(32, 182, 249, 1) 0%,
rgba(32, 182, 249, 1) 0%,
rgba(33, 120, 241, 1) 100%,
rgba(33, 120, 241, 1) 100%
);
.subtitle {
font-size: 20px;

@ -0,0 +1,69 @@
<template>
<div class="navigation-bar">
<div class="navigation-title">
<div class="main-title" :text="mainTitle">{{ mainTitle }}</div>
<div class="sub-title" :text="subTitle">{{ subTitle }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
mainTitle: {
type: String,
default: "娄东街道人口数据管理系统",
},
subTitle: {
type: String,
default: "Population data management system",
},
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.navigation-bar {
position: fixed;
top: 0;
height: 125px;
width: 100%;
background: url("~@/assets/images/ui/navigation.png");
background-size: 100% 100%;
display: flex;
justify-content: center;
.navigation-title {
text-align: center;
margin-top: 6px;
.main-title {
font-size: 36px;
color: #ffffff;
letter-spacing: 3px;
text-shadow: #333 2px 2px 2px;
font-family: "xiniu";
}
.sub-title {
font-size: 16px;
color: #f2fbff;
text-align: center;
font-family: "Alibaba-PuHuiTi-Regular.otf";
text-shadow: #333 2px 2px 2px;
}
.main-title::before,
.sub-title::before {
content: attr(text);
position: absolute;
z-index: 10;
color: #ffffff;
background: linear-gradient(0deg, #9cf7ff 20%, #eaeaeb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
}
}
}
</style>

@ -41,7 +41,7 @@
<el-col :sm="24" :lg="12" style="padding-left: 20px">
<h2>若依后台管理框架</h2>
<p>
一直想做一款后台管理系统看了很多优秀的开源项目但是发现没有合适自己的于是利用空闲休息时间开始自己写一套后台系统如此有了若依管理系统她可以用于所有的Web应用程序如网站管理后台网站会员中心CMSCRMOA等等当然您也可以对她进行深度定制以做出更强系统所有前端后台代码封装过后十分精简易上手出错概率低同时支持移动客户端访问系统会陆续更新一些实用功能
一直想做一款后台管理系统看了很多优秀的开源项目但是发现没有合适自己的于是利用空闲休息时间开始自己写一套后台系统如此有了人口数据管理系统她可以用于所有的Web应用程序如网站管理后台网站会员中心CMSCRMOA等等当然您也可以对她进行深度定制以做出更强系统所有前端后台代码封装过后十分精简易上手出错概率低同时支持移动客户端访问系统会陆续更新一些实用功能
</p>
<p>
<b>当前版本:</b> <span>v{{ version }}</span>
@ -118,12 +118,19 @@
>
</p>
<p>
<i class="el-icon-user-solid"></i> QQ群<s> 满937441 </s> <s> 满887144332 </s>
<s> 满180251782 </s> <s> 满104180207 </s> <s> 满186866453 </s> <s> 满201396349 </s>
<s> 满101456076 </s> <s> 满101539465 </s> <s> 满264312783 </s> <s> 满167385320 </s>
<s> 满104748341 </s> <s> 满160110482 </s> <s> 满170801498 </s> <s> 满108482800 </s>
<s> 满101046199 </s> <s> 满136919097 </s> <s> 满143961921 </s> <s> 满174951577 </s>
<s> 满161281055 </s> <s> 满138988063 </s> <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=SUc-msaypcqB2UTFif4eqGlBHkKcvMNP&authKey=JdQBouY2PG%2BS%2BCzAfIgbCGNgxyahpfh24IW%2F03rPxGilhqVbisLma%2FFFnt79DHNh&noverify=0&group_code=151450850" target="_blank">151450850</a>
<i class="el-icon-user-solid"></i> QQ群<s> 满937441 </s>
<s> 满887144332 </s> <s> 满180251782 </s> <s> 满104180207 </s>
<s> 满186866453 </s> <s> 满201396349 </s> <s> 满101456076 </s>
<s> 满101539465 </s> <s> 满264312783 </s> <s> 满167385320 </s>
<s> 满104748341 </s> <s> 满160110482 </s> <s> 满170801498 </s>
<s> 满108482800 </s> <s> 满101046199 </s> <s> 满136919097 </s>
<s> 满143961921 </s> <s> 满174951577 </s> <s> 满161281055 </s>
<s> 满138988063 </s>
<a
href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=SUc-msaypcqB2UTFif4eqGlBHkKcvMNP&authKey=JdQBouY2PG%2BS%2BCzAfIgbCGNgxyahpfh24IW%2F03rPxGilhqVbisLma%2FFFnt79DHNh&noverify=0&group_code=151450850"
target="_blank"
>151450850</a
>
</p>
<p>
<i class="el-icon-chat-dot-round"></i> 微信<a
@ -292,7 +299,9 @@
<li>修复table中更多按钮切换主题色未生效修复问题</li>
<li>修复某些特性的环境生成代码变乱码TXT文件问题</li>
<li>修复代码生成图片/文件/单选时选择必填无法校验问题</li>
<li>修复某些特性的情况用户编辑对话框中角色和部门无法修改问题</li>
<li>
修复某些特性的情况用户编辑对话框中角色和部门无法修改问题
</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
@ -353,7 +362,9 @@
<li>新增获取不带后缀文件名称方法</li>
<li>新增获取配置文件中的属性值方法</li>
<li>新增内容编码/解码方便插件集成使用</li>
<li>字典类型必须以字母开头且只能为小写字母数字下滑线</li>
<li>
字典类型必须以字母开头且只能为小写字母数字下滑线
</li>
<li>优化设置分页参数默认值</li>
<li>优化对空字符串参数处理的过滤</li>
<li>优化显示顺序orderNum类型为整型</li>
@ -557,8 +568,12 @@
<li>BLOB下载时清除URL对象引用</li>
<li>代码生成导入表按创建时间排序</li>
<li>修复代码生成页面数据编辑保存之后总是跳转第一页的问题</li>
<li>修复带safari浏览器无法格式化utc日期格式yyyy-MM-dd'T'HH:mm:ss.SSS问题</li>
<li>多图上传组件移除多余的api地址&验证失败导致图片删除问题&无法删除相应图片修复</li>
<li>
修复带safari浏览器无法格式化utc日期格式yyyy-MM-dd'T'HH:mm:ss.SSS问题
</li>
<li>
多图上传组件移除多余的api地址&验证失败导致图片删除问题&无法删除相应图片修复
</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
@ -603,7 +618,9 @@
</el-collapse-item>
<el-collapse-item title="v3.5.0 - 2021-05-25">
<ol>
<li>新增菜单导航显示风格TopNavfalse为左侧导航菜单true为顶部导航菜单</li>
<li>
新增菜单导航显示风格TopNavfalse为左侧导航菜单true为顶部导航菜单
</li>
<li>布局设置支持保存&重置配置</li>
<li>修复树表数据显示不全&加载慢问题</li>
<li>新增IE浏览器版本过低提示页面</li>
@ -622,7 +639,9 @@
<li>升级druid到最新版本v1.2.6</li>
<li>升级mybatis到最新版3.5.6 阻止远程代码执行漏洞</li>
<li>升级oshi到最新版本v5.6.0</li>
<li>velocity剔除commons-collections版本防止3.2.1版本的反序列化漏洞</li>
<li>
velocity剔除commons-collections版本防止3.2.1版本的反序列化漏洞
</li>
<li>数据监控页默认账户密码防止越权访问</li>
<li>修复firefox下表单构建拖拽会新打卡一个选项卡</li>
<li>修正后端导入表权限标识</li>
@ -999,11 +1018,7 @@
<span>捐赠支持</span>
</div>
<div class="body">
<img
src="@/assets/images/pay.png"
alt="donate"
width="100%"
/>
<img src="@/assets/images/pay.png" alt="donate" width="100%" />
<span style="display: inline-block; height: 30px; line-height: 30px"
>你可以请作者喝杯咖啡表示鼓励</span
>
@ -1020,14 +1035,14 @@ export default {
data() {
return {
//
version: "3.8.8"
version: "3.8.8",
};
},
methods: {
goTarget(href) {
window.open(href, "_blank");
}
}
},
},
};
</script>
@ -1094,4 +1109,3 @@ export default {
}
}
</style>

@ -1,15 +1,25 @@
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">若依后台管理系统</h3>
<NavigationBar />
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<h3 class="title">用户登录</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
placeholder="请输入用户名/手机号"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="password">
@ -17,57 +27,77 @@
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
placeholder="请输入用户密码"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
placeholder="请输入验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
<!-- <svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/> -->
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;"></el-checkbox>
<el-form-item style="width:100%;">
<el-checkbox
class="rememberMe"
v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
<el-form-item style="width: 100%">
<el-button
class="logo-btn"
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
style="width: 100%"
@click.native.prevent="handleLogin"
>
<span v-if="!loading"> </span>
<span v-else> ...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
<div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'"
>立即注册</router-link
>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<!-- <div class="el-login-footer">
<span>Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</span>
</div>
</div> -->
</div>
</template>
<script>
import NavigationBar from "@/components/NavigationBar";
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { encrypt, decrypt } from "@/utils/jsencrypt";
export default {
name: "Login",
components: {
NavigationBar,
},
data() {
return {
codeUrl: "",
@ -76,32 +106,32 @@ export default {
password: "admin123",
rememberMe: false,
code: "",
uuid: ""
uuid: "",
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }
{ required: true, trigger: "blur", message: "请输入您的账号" },
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" }
{ required: true, trigger: "blur", message: "请输入您的密码" },
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
code: [{ required: true, trigger: "change", message: "请输入验证码" }],
},
loading: false,
//
captchaEnabled: true,
//
register: false,
redirect: undefined
redirect: undefined,
};
},
watch: {
$route: {
handler: function(route) {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
immediate: true,
},
},
created() {
this.getCode();
@ -109,8 +139,9 @@ export default {
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
getCodeImg().then((res) => {
this.captchaEnabled =
res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
@ -120,29 +151,37 @@ export default {
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
const rememberMe = Cookies.get("rememberMe");
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
password:
password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), {
expires: 30,
});
Cookies.set("rememberMe", this.loginForm.rememberMe, {
expires: 30,
});
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe');
Cookies.remove("rememberMe");
}
this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
.catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
@ -150,8 +189,8 @@ export default {
});
}
});
}
}
},
},
};
</script>
@ -161,44 +200,78 @@ export default {
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
background-image: url("../assets/images/ui/logo_bg.jpg");
background-size: 100% 100%;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
color: #00d8ff;
font-size: 30px;
font-family: "xiniu";
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
background-image: url("../assets/images/ui/img_frame.png");
background-size: 100% 100%;
width: 500px;
padding: 35px 35px 5px 35px;
.el-input {
height: 38px;
height: 50px;
input {
height: 38px;
height: 50px;
font-size: 18px;
color: #d8dde6;
font-family: "Alibaba-PuHuiTi-Regular.otf";
background: rgba(9, 27, 52, 0.2);
border-color: #1489cc;
}
}
.input-icon {
height: 39px;
width: 14px;
height: 50px;
width: 18px;
margin-left: 2px;
color: #1adcff;
}
}
.rememberMe {
color: #d8dde6;
}
.logo-btn {
height: 50px;
background: linear-gradient(
0deg,
rgba(7, 39, 64, 0.9) 0%,
rgba(0, 132, 255, 0.9) 100%
);
box-shadow: 0px 3px 6px 0px rgba(4, 0, 0, 0.45);
border-radius: 10px;
// border-image: linear-gradient(0deg, #00c0ff, #009cff) 10 10;
}
.logo-btn:hover {
background: linear-gradient(
0deg,
rgba(7, 39, 64, 0.9) 0%,
rgba(0, 132, 255, 0.9) 100%
);
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 38px;
height: 50px;
float: right;
img {
height: 50px;
width: 100%;
cursor: pointer;
vertical-align: middle;
border-radius: 4px;
}
}
.el-login-footer {

@ -1,15 +1,15 @@
'use strict'
const path = require('path')
"use strict";
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir)
return path.join(__dirname, dir);
}
const CompressionPlugin = require('compression-webpack-plugin')
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 || 80; // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
@ -20,16 +20,16 @@ module.exports = {
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// 在npm run build 或 yarn build 时 生成文件的目录名称要和baseUrl的生产环境路径一致默认dist
outputDir: 'dist',
outputDir: "dist",
// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
assetsDir: 'static',
assetsDir: "static",
// 是否开启eslint保存检测有效值ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
lintOnSave: process.env.NODE_ENV === "development",
// 如果你不需要生产环境的 source map可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
host: "0.0.0.0",
port: port,
open: true,
proxy: {
@ -38,93 +38,92 @@ module.exports = {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
["^" + process.env.VUE_APP_BASE_API]: "",
},
disableHostCheck: true
},
},
disableHostCheck: true,
},
css: {
loaderOptions: {
sass: {
sassOptions: { outputStyle: "expanded" }
}
}
sassOptions: { outputStyle: "expanded" },
},
},
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
"@": resolve("src"),
},
},
plugins: [
// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
new CompressionPlugin({
cache: false, // 不启用文件缓存
test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式
filename: '[path][base].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
filename: "[path][base].gz[query]", // 压缩后的文件名
algorithm: "gzip", // 使用gzip压缩
minRatio: 0.8, // 压缩比例,小于 80% 的文件不会被压缩
deleteOriginalAssets: false // 压缩后删除原文件
})
deleteOriginalAssets: false, // 压缩后删除原文件
}),
],
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
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/assets/icons")).end();
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.rule("icons")
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.include.add(resolve("src/assets/icons"))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: 'icon-[name]'
symbolId: "icon-[name]",
})
.end()
.end();
config.when(process.env.NODE_ENV !== 'development', config => {
config.when(process.env.NODE_ENV !== "development", (config) => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
.plugin("ScriptExtHtmlWebpackPlugin")
.after("html")
.use("script-ext-html-webpack-plugin", [
{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
inline: /runtime\..*\.js$/,
},
])
.end();
config.optimization.splitChunks({
chunks: 'all',
chunks: "all",
cacheGroups: {
libs: {
name: 'chunk-libs',
name: "chunk-libs",
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
chunks: "initial", // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
name: "chunk-elementUI", // split elementUI into a single package
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
name: "chunk-commons",
test: resolve("src/components"), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
})
}
}
reuseExistingChunk: true,
},
},
});
config.optimization.runtimeChunk("single");
});
},
};

Loading…
Cancel
Save