iview-admin2.3.0 技术文档.docx

Iview-admin 2.3.0 技术文档主要涵盖了基于 Vue.js 框架的前端项目开发配置和路由管理。以下将详细解释其中的关键知识点： 1. **Vue.js 基础配置**： 在项目的根目录下，`vue.config.js` 文件是 Vue CLI 的配置文件。这里配置了基础 URL，例如： ```javascript const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin/' : '/' ``` 这段代码根据环境变量 `NODE_ENV` 来设置生产环境或开发环境的基础 URL。`BASE_URL` 用于指定打包后的项目相对于服务器的路径。 此外，`chainWebpack` 配置允许你修改 webpack 链式配置，例如创建别名，简化引用路径： ```javascript config.resolve.alias .set('@', resolve('src')) .set('_c', resolve('src/components')) .set('_conf', resolve('config')) ``` 这里设置了 `@`, `"_c"` 和 `"_conf"` 三个别名，方便快速引用项目中的 `src` 目录、组件目录和配置目录。 2. **配置端口号**： 在 `package.json` 文件中的 `scripts` 字段，可以设置开发服务器的端口号： ```json "scripts": { "dev": "vue-cli-service serve --open --port=80", } ``` 添加 `--port=80` 参数可以将开发服务器设置为监听 80 端口。 3. **跨域设置**： 在 `src/config/index.js` 文件中，你可以配置不同环境下的 API 请求基础 URL，如： ```javascript baseUrl: { dev: 'http://134.175.199.117:8087', pro: 'https://produce.com' } ``` 分别定义了开发环境和生产环境的后端接口地址。 4. **路由配置**： 路由配置位于 `src/router/routers.js` 文件中，分为两部分：`index.js` 定义路由守卫逻辑，`routers.js` 定义具体的页面路由信息。 5. **路由可配项**： 在 `iview-admin` 中，每个路由的 `meta` 字段可以自定义多个参数，比如： - `hideInMenu`: 控制页面是否在左侧菜单显示。 - `showAlways`: 如果设置为 `true`，即使只有一个子路由，父级菜单也会在菜单中显示。 - `notCache`: 设置为 `true` 可避免页面被缓存。 - `access`: 设置页面的访问权限，影响子路由的访问。 - `icon`: 页面在菜单、面包屑和标签导航的图标，自定义图标前需加下划线 ` _`。 - `href`: 用于跳转到外部链接的 URL。 6. **跳转到外部网页**： 如果需要在菜单中添加一个跳转到外部网页的链接，例如跳转到 GitHub： ```javascript export default [ { path: '', name: 'lison16', meta: { href: 'http://222.178.203.72:19005/whst/63/=fhsgtazbnl//lison16', icon: '_love', title: 'Lison 的 github 首页' } } ] ``` 7. **独立页面**： 对于独立的页面，如登录页、错误页，它们不需要 Main 组件，直接在 `routers.js` 的数组中定义即可。例如，登录页的定义： ```javascript export default [ { path: '/login', name: 'login', meta: { title: 'Login - 登录', hideInMenu: true } } ] ``` 总结来说，Iview-admin 2.3.0 技术文档提供了详细的 Vue.js 项目配置和路由管理指南，包括基础配置、端口设置、跨域配置、路由元信息以及独立页面的处理，有助于开发者高效地搭建和维护基于 Vue 和 Iview 的管理后台系统。