用Sea.js引用Vue——不打包、文件级别的增量更新一般情况下，我们的Vue项目都是基于vue-cli新建的项目，每次

一般情况下，我们的Vue项目都是基于vue-cli新建的项目，每次有代码改动，都需要把整个项目重新打包部署。而在Vue项目之前，我们也维护一些基于jQuery的项目，这种项目在部署的时候，做到了更精细的增量，只需要更新那几个修改的文件即可。

之前介绍过，如何在JSP页面里使用Vue，让开发人员能用Vue的组件库去写JSP中比较复杂的交互。JSP写不动了，我果断在JSP中使用Vue。这种写法，只是针对比较简单的展示页会有不错的效果，而下文，将会用Sea.js引用相关模块，也加上Vue-Router等等模块，去新建一个Vue项目。

CMD与sea.js

CMD和AMD的区别就在于加载模块的时机。

AMD是先把相关的模块提前加载，写法如下：

define(['./routes/routes'], function (router) {
  var app = new Vue({
    el: '#app',
    router: router
  });
});

CMD是在有需要的时候再去加载，写法如下：

define(function (require, exports, module) {
  var router = require('./routes/routes');
  var app = new Vue({
    el: '#app',
    router: router
  });
});

对于Vue组件来说，我们一般都是用CMD的方式去加载，实现按需加载，

项目创建

首先要把sea.js、vue、vue-router等文件下载到本地，在html页面中引用。然后，在这里用seajs.use方法加载app.js。

<script src="./static/sea/sea.js"></script>
<script src="./static/sea/seajs-text.js"></script>
<script src="./static/vue/vue2.6.11.js"></script>
<script src="./static/vue/vue-router.min.js"></script>

<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script type="text/javascript">
    seajs.use('./app.js');
  </script>
</body>

如下面的代码所示，app.js就是一个入口文件，定义好路由。

define(function (require, exports, module) {
  var router = require('./routes/routes');
  var app = new Vue({
    el: '#app',
    router: router
  });
});

路由文件的定义只需要遵守sea.js的语法规范即可。注意这里加载组件使用按需加载的异步写法。

define(function(require, exports, module) {
  var routes = [
    {
      path: "/index",
      component: (resolve) => require.async(["../js/index/index.js"], function(res) {
        resolve(res);
      }),
      meta: {
        title: "首页"
      }
    },
    {
      path: "/about",
      component: (resolve) => require.async(["../js/about/index.js"], function(res) {
        resolve(res);
      }),
      meta: {
        title: "关于"
      }
    }
  ];
  var router = new VueRouter({
    routes
  });
  router.beforeEach(function(to, from, next) {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
      document.title = to.meta.title;
    }
    next();
  });
  module.exports = router;
});

这里如果用AMD规范，就需要提前把组件加载好，这样是不能实现按需加载的。

如图所示，在进入首页时，只加载了首页相关资源：

截屏2024-08-04 23.08.49.png

跳转到关于页面时，才会加载相关资源。

截屏2024-08-04 23.09.06.png

注意我们的组件，也需要用CMD的语法：

define(function(require, exports, module) {
  var sTpl = require("./index.html");
  module.exports = {
    // 模板加载
    template: sTpl,
    data: function data() {
      return {
        msg: '关于'
      };
    },
    methods: {
      init: function init() {
        console.log('初始化页面')
      },
    },
    mounted: function mounted() {
      this.init()
    }
  };
});