一、vue的非编译模式

基于requireJS+VUE搭建的环境

（1）路由配置信息

A、异步加载组件

define(function(){ return [{ name: "my-component", path: "/myComponent", component: resolve => require(['myComponent'], resolve), }];});

B、同步加载组件

define(['myComponent'],function(myComponent){ return [{ name: "my-component", path: "/myComponent", component: myComponent, }];});

（2）组件或第三方库

A、懒加载组件

define(function(){ let dayjs=null; return { data () { }, beforeCreate(){ dayjs=require('dayjs'); } }});

B、同步加载组件

define(['dayjs'],function(dayjs){ return { data () { } }});

二、vue的编译模式

（1）路由配置信息

A、异步加载组件

let myComponent = resolve => require.ensure([], () =>resolve(require(['myComponent.vue'])) //或者 需要syntax-dynamic-import插件//let myComponent =()=> import('myComponent.vue') let routes=[{ name: "my-component", path: "/myComponent", component: myComponent, }];

B、同步加载组件

import myComponent from 'myComponent.vue' let routes=[{ name: "my-component", path: "/myComponent", component: myComponent, }];

（2）组件或第三方库

A、懒加载组件

export default { beforeCreate () { import('dayjs').then(module => { this.dayjs = module; }); }, data () { return { dayjs: null } }}

B、同步加载组件

import dayjs from 'dayjs' export default { data () { }, mounted () { }}

（3）配置编译多文件