cli2.0的vue项目优化

最新推荐文章于 2024-10-23 18:00:00 发布

我今年六岁

最新推荐文章于 2024-10-23 18:00:00 发布

阅读量247

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/poppy995/article/details/101103833

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文主要介绍了如何针对Vue CLI2.0项目进行优化，以解决JS文件过大的问题。通过在webpack配置中排除特定文件、在index.html中引入对应版本的CSS，并在main.js中调整代码，可以有效减少打包后的文件大小。同时，文章还详细阐述了如何实施路由懒加载，以进一步提升应用的加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决js文件过大的问题

1.在webpack.base.conf.js中添加下面代码，是为了打包是不带入以下文件

module.exports = {
  ...
	externals: {
	    vue: 'Vue',
	    // 'element-ui': 'ElEMENT'
	    'element-ui': 'ElementUI'
	  }
  ...
}

2.在index.html中(这里是vue项目中的index不是dist文件中的index)添加以下代码

  <head>
<!-- cssCDN -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css"
    />
    <!-- CDN的引入 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>
  </head>

注意 element UI的版本号要看清楚
css的版本号要对应js的版本号，否则有些样式会出错
https://unpkg.com/element-ui@版本号/lib/theme-chalk/index.css

3.在入口文件中(我的是main.js)中将以下代码删除或者注释

import ElementUI from 'element-ui'
Vue.use(ElementUI)

路由懒加载

import index from './views/index/index.vue'
{
    path: '/',
    component: index,
    name: '',
    hidden: true
  }

将上面代码改为

{
    path: '/',
    component: ()=>import('./views/index/index.vue'),
    name: '',
    hidden: true
  }