{"versions":{"2.0.0-release.1":{"name":"@metric/assets","version":"2.0.0-release.1","private":false,"description":"公共资源包，由后端代理资源文件，如图片资源等","scripts":{"release:patch":"npm version patch","release:minor":"npm version minor","release:major":"npm version major","build":" "},"files":["images","styles","README.md","package.json"],"_id":"@metric/assets@2.0.0-release.1","readmeFilename":"README.md","gitHead":"72e6f869df9dd487187b023e6332021c12b1f6e6","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-cXerRo8UD36TC64R726cF2Y+GK3tlZi0U/XA6NyF17H9um4E8U9A9seNMb2wvvQwGU3FG8JrlPYt2OK8LJxQWQ==","shasum":"a24e05914685ee82cffbb8294d4466610ac56ec8","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/@metric/assets/-/assets-2.0.0-release.1.tgz"},"contributors":[]}},"dist-tags":{"latest":"2.0.0-release.1"},"name":"@metric/assets","time":{"modified":"2026-05-15T09:54:26.469Z","created":"2026-05-15T09:54:26.469Z","2.0.0-release.1":"2026-05-15T09:54:26.469Z"},"readme":"# @metric/assets\r\n\r\n公共资源包，由后端代理资源文件，如图片资源等\r\n\r\n## 依赖排除\r\n\r\n因为 @metric/assets 包是公共资源包，资源文件会有子目录，只通过包名不能排除子路径，所以需要排除子路径\r\n\r\n### 项目配置\r\n\r\nwebpack 配置\r\n\r\n```js\r\nmodule.exports = {\r\n  //...\r\n  externals: [\r\n    (context, request, callback) => {\r\n      if (/^@metric\\/assets\\//.test(request)) {\r\n        return callback(null, `commonjs ${request}`);\r\n      }\r\n      callback();\r\n    }\r\n}\r\n```\r\n\r\nrollup 配置\r\n\r\n```js\r\nexport default {\r\n  //...\r\n  external: [\r\n    /^@metric\\/assets\\//,\r\n  ],\r\n}\r\n```\r\n\r\n### 使用\r\n\r\n#### 图片\r\n\r\n- JSX\r\n\r\n```js\r\nimport logo from '@metric/assets/images/logo.png';\r\n\r\n<img src={logo} />\r\n```\r\n\r\n- Template\r\n\r\n```vue\r\n<img :src=\"require('@metric/assets/images/core/error.png')\" alt=\"Error Image\">\r\n```\r\n\r\n```html\r\nimport logo from '@metric/assets/images/core/error.png';\r\n<img :src=\"logo\" />\r\n```\r\n\r\n- JS\r\n\r\n```javascript\r\nconst dataSet = require('@metric/assets/images/core/dataset.svg');\r\n```\r\n\r\n- CSS\r\n\r\n```vue\r\n<template>\r\n  <div\r\n    :style=\"{ backgroundImage: `url(${require('@metric/assets/images/model/dialogBg.png')})` }\"\r\n  />\r\n</template>\r\n```\r\n\r\n#### 样式\r\n\r\n全局样式引入\r\n\r\n```js\r\nimport '@metric/assets/styles/global/index.scss';\r\n```\r\n\r\n模块样式引入\r\n\r\n```js\r\nimport '@metric/assets/styles/module/button.scss';\r\n```\r\n\r\n## 目录结构\r\n\r\n```\r\n@metric/assets/\r\n├── images/\r\n│   ├── core/ - @metric/core包对应的图片资源\r\n│   ├── model/ - @metric/model包对应的图片资源\r\n│   ├── management/ - @metric/management包对应的图片资源\r\n│   ├── application/ - @metric/application包对应的图片资源\r\n│   ├── common/ - 公共图片资源\r\n│   └── styles/ - 公共样式对应的图片资源\r\n├── styles/\r\n│   └── modules/ - 各模块公共样式目录\r\n│   └── global/  - 全局样式  \r\n│       ├── index.scss - 全局样式入口\r\n│       ├── xxxx.scss - 具体全局样式 \r\n├── .gitignore\r\n├── README.md\r\n└── package.json\r\n```\r\n\r\n## 注意事项\r\n\r\n- 资源文件路径命名，字母开头，可以用下划线，数字，不能使用中文，不能使用特殊字符\r\n- 不能使用别名引用资源文件，否则无法排除","users":{}}