# 前端
# 工程结构
hos
| node_modules 项目依赖包
| public 模板文件
| src 项目资源
| biz 业务目录
| api 接口配置
| assets 静态文件
| axios 自定义拦截器
| components 项目通用组件
| constant 静态常量
| directive 自定义指令
| enum 全局枚举
| i18n 国际化配置
| store vuex配置
| styles 公共样式
| utils 工具方法
| views 页面
| sys 系统目录
| hos-app-base hos基础模块目录
| api 接口配置
| assets 静态文件
| axios axios配置
| components 项目通用组件
| constant 静态常量
| directive 自定义指令
| enum 全局枚举
| i18n 国际化配置
| router 路由配置
| store vuex配置
| styles 公共样式
| utils 工具方法
| views 页面
| defaultSettings 项目默认配置项
| main.js js主入口
| permission.js 全局路由守卫（权限判断）
| static 引入的静态资源（hisUI使用，其他不需要）
| vue.config.js vue配置
| .env 环境配置
| | .... 其他
系统目录存放框架代码，hos-base-app是基础模块的人员组织的框架代码，如果后续要开发新的框架，比如工作流，那就需要新建一个和hos-base-app同级的文件夹进行开发；业务代码存放在biz目录下，使用hisUI开发的项目需要把项目页面放到static目录下。hisUI页面菜单配置详见static目录菜单配置
# 系统模块
# router
存放路由配置
# store
存放全局状态 store
# components
存放跨业务的公用组件
# i18n
定义预设语言，配置国际化初始条件
# ui
配置 HosUI，定义自定义主题，自定义样式
# utils
存放通用方法
# 业务模块
# views 模块
存放业务页面
# 目录结构
|views
| user 用户模块（示例）
| index.vue
| components 功能组件
| dialog 功能弹窗
| system 系统设置模块（示例）
| order-manage 订单管理（示例）
| ...
# api
负责定义整个项目的接口配置，以接口模块区分文件
# 目录结构
api
| common.js 基础模块接口(示例)
| staff.js 用户模块接口(示例)
| system.js 系统模块(示例)
| ...
# 配置文件
# vue.config.js
const Version = new Date().getTime(); // 版本 一个随机数放到文件名后边，避免线上缓存
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin"); // 这里引入`这个CopyWebpackPlugin`插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 代码压缩
const FileManagerPlugin = require("filemanager-webpack-plugin"); // 打包生成zip文件
const GenerateAssetPlugin = require("generate-asset-webpack-plugin"); // 生成版本号文件
const APP_VERSION = require("./package.json").version;
const APP_NAME = require("./package.json").name;
const APP_BUILD_DATE = getNowFormatDate();
const APP_FULL_NAME = APP_NAME + "-" + APP_VERSION + "." + APP_BUILD_DATE;
function getNowFormatDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + month + strDate;
return currentdate;
}
function resolve(dir) {
return path.join(__dirname, "/src" + "/" + dir);
}
const name = process.env.VUE_APP_TITLE || "hos"; // 网页标题
const port = process.env.port || process.env.npm_config_port || 8080; // 端口
module.exports = {
// publicPath:'/test',
lintOnSave: false,
configureWebpack: {
// 优化
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
// 删除注释
comments: false,
},
//生产环境自动删除console
compress: {
//warnings: false, // 若打包错误，则注释这行
drop_debugger: true, //清除 debugger 语句
drop_console: true, //清除console语句
pure_funcs: ["console.log"],
},
},
sourceMap: false,
parallel: true,
}),
],
},
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, "static"),
to: "static",
ignore: [".*"],
},
]),
],
output: {
filename: `js/[name].${Version}.js`,
chunkFilename: `js/[name].${Version}.js`,
},
},
css: {
loaderOptions: {
sass: {
sassOptions: { outputStyle: "expanded" },
},
},
},
chainWebpack: (config) => {
config.plugin("html").tap((args) => {
args[0].title = name;
return args;
});
// 修改打包时css抽离后的filename及抽离所属目录
config
.plugin("extract-css")
.use(MiniCssExtractPlugin)
.tap((args) => [
{
filename: `css/[name].${Version}.css`,
chunkFilename: `css/[name].${Version}.css`,
},
]);
if (process.env.NODE_ENV === "production") {
// 正式环境下，删除console和debugger
config.optimization
.minimize(true)
.minimizer("terser")
.tap((args) => {
let { terserOptions } = args[0];
terserOptions.compress.drop_console = true;
terserOptions.compress.drop_debugger = true;
return args;
});
config
.plugin("fileManager")
.use(FileManagerPlugin, [
{
onStart: {
delete: ["./" + APP_NAME, "./" + APP_FULL_NAME + ".zip"],
},
onEnd: {
copy: [
{ source: "./dist", destination: "./" + APP_NAME + "/dist" },
],
delete: ["./dist"],
archive: [
{
source: "./" + APP_NAME,
destination: "./" + APP_FULL_NAME + ".zip",
},
],
},
},
])
.after("html");
config
.plugin("generateAsset")
.use(GenerateAssetPlugin, [
{
filename: "version",
fn: (compilation, cb) => {
cb(null, APP_FULL_NAME);
},
extraFiles: [],
},
])
.after("fileManager");
}
config.resolve.alias
.set("@", resolve("biz"))
.set("@src", resolve("./"))
.set("@core", resolve("sys"))
.set("@base", resolve("sys/hos-app-base"))
.set("@components", resolve("sys/hos-app-base/components"));
},
devServer: {
host: "0.0.0.0",
port: port,
open: true,
disableHostCheck: true,
proxy: {
"/api": {
// 开发环境后端地址
target: "http://114.251.235.9:8367/api",
changeOrigin: true,
pathRewrite: {
"^/api": "/",
},
},
},
},
};
# 本地代理
// 在Vue.config.js里配置
devServer: {
host: '0.0.0.0',
port: port,
open: true,
disableHostCheck: true,
proxy: {
'/api': {
// 开发环境后端地址
target: 'http://114.251.235.9:8367/api',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
},
}
}
# 项目别称总结
@ biz 业务目录
@src ./ 工程目录
@core sys 总系统目录
@base sys/hos-app-base 系统目录
@components sys/hos-app-base/components 系统目录下公共组件
如需添加新的项目别称需要在 vue.config.js文件中添加
# .env
NODE_ENV=production
# 后端请求地址
VUE_APP_BASE_URL='/api'
# 接口超时时间
VUE_APP_TIME_OUT=15000
# 是否全局加签名 0:否 1:是
VUE_APP_GLOBAL_SIGN=0
# 是否全局加密 0:否 1:是
VUE_APP_GLOBAL_CRYPT=0
# 是否全局解密 0:否 1:是
VUE_APP_GLOBAL_DECRYPT=0
# 加密算法 sm4、aes、rsa
VUE_APP_CRYPT_TYPE='sm4'
# 极简 0:极简 1:hos
VUE_APP_SIMPLE_ONCE = '0'
# 环境 0: 独立运行 1: 注册到门户引擎中运行
VUE_APP_ENV_TYPE = '0'
# 页面标题
VUE_APP_TITLE = '基础开发框架'
# 极简版导航栏是否显示设置按钮 0:否 1:是
VUE_APP_NAV_SETUP = '1'
#帮助文档链接
VUE_APP_HELP_URL = 'http://114.242.246.250:8034/'
###统一登录平台的编码
VUE_APP_LOGIN_SOURCE = 'hos'
# 统一登录测试地址 发送 跨域 token
VUE_APP_OAUTH_URL = '/oauth/postMessage'
# 登录类型为oauth类型时需要
VUE_APP_LOGIN_OAUTH_SERVER_URL = '/oauth/logout'
# 统一登录修改密码地址
VUE_APP_OAUTH_UPDATE_PWD_URL = '/setpassword'
# 右上角MSG_BELL开关 '0':关闭 '1':开启
VUE_APP_MSG_BELL = '1'
# 消息中心ws直连或代理 '/ws':代理 'ip地址':直连
VUE_APP_MSG_WS = '/ws'
# environment.js 文件
- 该文件路径为
/public/environment.js, 已在/public/index.html中引入。 - 使用时请先在
environment.js文件中定义变量, 在需要使用的文件中直接使用__hos.xxx(变量名)即可。 - 使用
environment.js文件中定义的变量时, 可配合returnGlobalValue方法使用。 通过import { returnGlobalValue } from '@base/utils'引用工具类中的returnGlobalValue方法。 - 使用
returnGlobalValue方法并传入变量名, 该方法优先返回environment.js中相应的变量值。若不存在, 则返回.env环境文件中的值。
- 使用方法参考
# defaultSetting 文件
框架默认的首页是可以进行修改的，默认使用 welcome 首页，如果想要切换首页，可以在 defaultSetting 文件里面进行配置。
- defaultPageComponent，配置首页的位置，将 import 里面的首页路径替换成自己想要的首页路径。
- multipage，{ true | false } 是否开启多页签模式。
- cached，{ true | false } 是否首页缓存。
- namespace，存储的前缀。
- name，引用 vue-ls 的名称，比如设置为'ls'，则使用 Vue.[ls]就可以引用到。
- storage，存储方式。
# 风格切换
框架默认使用 HosUI 极简版,如果想要切换为 HOS 版风格,可修改.env 配置文件,将 VUE_APP_SIMPLE_ONCE 的值修改为1即可.
