关于 Vue 的那点事儿~(十五)

173 阅读1分钟

Vue 去除 URL 中的# 的方法

Vue-Router 默认使用 hash 模式,所以在路由加载的时候,项目中的 URL 会自带 "#".如果不想使用 "#", 可以使用 Vue-Router 的另一种模式 history:new Router ({ mode : 'history', routes: [ ]})
需要注意的是,当我们启用 history 模式的时候,由于我们的项目是一个单页面应用,所以在路由跳转的时候,就会出现访问不到静态资源而出现“404”的情况,这时候就需要服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 “index.html” 页面

在 Vue 中使用插件的步骤

采用 ES6 的 import ... from ... 语法或 CommonJS 的 require() 方法引入插件
使用全局方法 Vue.use( plugin )使用插件,可以传入一个选项对象 Vue.use(MyPlugin, { someOption: true })

Vue 项目优化的解决方案

  1. 使用 mini-css-extract-plugin 插件抽离 css
  2. 配置 optimization 把公共的 js 代码抽离出来
  3. 通过 webpack 处理文件压缩
  4. 不打包框架、库文件,通过 cdn 的方式引入
  5. 小图片使用 base64
  6. 配置项目文件懒加载
  7. UI 库配置按需加载
  8. 开启 Gzip 压缩