代码拆分在vue-cli生成的项目上不能正常工作

代码拆分（Code Splitting）是一种优化前端应用性能的技术，它可以将应用的代码按需加载，减少初始加载时间和资源消耗。在Vue.js项目中，可以通过Webpack等构建工具来实现代码拆分。

在vue-cli生成的项目中，代码拆分通常是通过Webpack的动态导入（Dynamic Import）功能来实现的。动态导入允许将代码分割成小块，并在需要时按需加载。但是，如果代码拆分在vue-cli生成的项目上不能正常工作，可能是由于以下原因导致的：

配置问题：请确保项目的Webpack配置文件中启用了代码拆分功能。在vue-cli生成的项目中，通常可以在vue.config.js文件中进行相关配置。具体配置方式可以参考Vue CLI的官方文档（https://cli.vuejs.org/config/#vue-config-js）。
语法问题：请确保在代码中正确使用了动态导入的语法。在Vue.js中，可以使用import()函数来实现动态导入。例如，可以将需要拆分的组件或模块使用import()函数进行导入，然后在需要使用的地方进行调用。示例代码如下：

// 异步导入组件
const MyComponent = () => import('./MyComponent.vue');

// 在需要使用的地方调用组件
Vue.component('my-component', MyComponent);

版本问题：请确保使用的Vue.js和相关构建工具的版本支持代码拆分功能。建议使用最新版本的Vue.js和相关工具，以确保能够获得最好的兼容性和性能。

如果以上方法都无法解决问题，建议查阅Vue.js官方文档、Webpack官方文档或相关社区论坛，寻求更详细的帮助和解决方案。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云区块链（Blockchain）：https://cloud.tencent.com/product/baas
腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

相关·内容

前端-手摸手，带你用合理的姿势使用webpack4（下）

自定义组件/函数 chunk-commons 这里的 commons 主要分为必要和非必要。必要组件是指那些项目里必须加载它们才能正常运行的组件或者函数。...所以还是那句话资源的加载策略并没什么完全的方案，都需要结合自己的项目找到最合适的拆包策略。...每次发布更新的时候，先将静态资源(js, css, img) 传到 cdn 服务上，然后再上传 html 文件，这样既保证了老用户能否正常访问，又能让新用户看到新的页面。...官方文档要使用它配置也很简单： recordsPath: path.join(__dirname, "records.json"); 对，只要这一行代码就能开启这个选项，并打包的时候会自动生成一个...其实如一开始就讲的，vue 有vue-cli、react 有creat-react-app，现在新建项目基本都是基于脚手架的，很少有人从零开始写 webpack 配置文件的，而且一般开发中，一般程序员也不需要经常去修改

1.3K3 0

三年项目升级Vue3的踩坑经历

2.6K2 0

vue入门环境搭建及运行

实际上它是对Chrome V8引擎进行了封装。Node 是一个服务器端 JavaScript 解释器，他会改变服务器应该如何工作的概念。...它的目标是帮助程序员构建高度可伸缩的应用程序，编写能够处理数万条同时连接到一个物理机的连接代码。那直白的说，Node.js就是服务器程序，是用来做后端的技术，不能直接用于前端开发。...但是干前端的学会了会更加的牛逼，对编程的思想和代码效率有很大的提升。Node大量使用时间驱动实现异步开发，能够高效的打通前后端，所以vue也是采用他作为配置环境，便于大型项目的开发。...官方提供的一个命令行工具（vue-cli），可用于快速搭建大型单页应用打开cmd命令框，输入 npm install --global vue-cli 第四步：安装webpack 打开cmd命令框...页面截图可能跟正常的有细微的出入第六步：运行vue的demo项目 cd demo_vue //进入到刚创建的项目中 $ npm install $ npm run dev

5401 0

vue项目你一定会用到的性能优化！

，它可以搜集多个现代网页性能指标，分析 Web 应用的性能并生成报告，为开发人员进行性能优化的提供了参考方向。...，这也是雅虎军规的一条） js 文件拆包，以vue-cli 为例，一般情况下我们可以通过cli的配置 splitChunks 做代码分割，将一些第三方的包走cdn，或者拆包。...如果有路由的情况下将路由做拆包处理，保证每个路由只加载当前路由对应的js代码优化文件大小减少字体包、css文件、以及js文件的大小（当然这些脚手架默认都已经做了）优化项目结构，每个组件的初始化都是有性能损耗的...，都是在打包后，我们无法分析出，那些东西不是我们在首屏必须需要的，从而不能做出针对新的优化，为了解决当前问题，各大bundle厂商也都有各自的分析包的方案以vue-cli 为例 "report":...如此对浏览器的SpeedIndex 也非常友好最后性能优化一直是一个很火的话题，不管从面试以及工作中都非常重要，有了这些优化的点，你在写代码或者优化老项目时都能游刃有余，能提前考虑到其中的一些坑，

1.3K2 0

php，vue，vue-ssr 三版本页面对比Demo

目前我这边的web页面，都是采用php+smarty模板生成的，是一种比较早期的开发模式。...，所以下面的对比分析仅作为直观上的对比了解，并不适用于详细性能上的严格对比额。 ...2、由于服务器版本的php或者vue-ssr的首屏数据都已经生成了，所以页面不会再次请求接口，少了数据的请求过程。而vue-cli版有一个较长的数据请求过程。...4、webpack打包拆离出来的独立js或者css文件，其实在同一域名下，由于浏览器同一域名可以并行6个tcp，以及http的keep-alive性质，其实总的下载时间不多。...vue-cli静态页面生成的白屏时间中，大部分是首屏数据请求消耗的时间，，同时也可以对比出，服务器渲染的对首屏时间的确有很明显的效果。

2.1K1 0

vue入门环境搭建及demo运行

实际上它是对Chrome V8引擎进行了封装。Node 是一个服务器端 JavaScript 解释器，他会改变服务器应该如何工作的概念。...它的目标是帮助程序员构建高度可伸缩的应用程序，编写能够处理数万条同时连接到一个物理机的连接代码。那直白的说，Node.js就是服务器程序，是用来做后端的技术，不能直接用于前端开发。...但是干前端的学会了会更加的牛逼，对编程的思想和代码效率有很大的提升。Node大量使用时间驱动实现异步开发，能够高效的打通前后端，所以vue也是采用他作为配置环境，便于大型项目的开发。...vue-cli 第四步：安装webpack 打开cmd命令框,输入 npm install webpack -g 第五步：创建vue的demo项目进入到你想要存放项目的目录下，执行该命令（ vue...init webpack 项目名称）： vue init webpack demo_vue demo项目及生成。

1K2 0

基于Vue-cli 快速搭建项目

Vue-cli可以快速帮助我们创建一个项目，这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。...一、准备工作　　在使用vue-cli时，首先需要安装nodejs，npm，其次需全局安装vue和vue-cli 　　1、nodejs和npm安装方法详见https://www.cnblogs.com/...四、安装完成后，创建自己的工作空间，在cmd切换至刚刚创建好的工作空间，如果已经有工作空间，直接切换到工作空间即可。　　...命令输入后，会进入安装阶段，需要用户输入一些信息　　1、Project name (vuetest) 项目名称，可以自己指定，也可直接回车，按照括号中默认名字（注意这里的名字不能有大写字母...(Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，因为我选择了使用ESLint 　　4、Standard (https://github.com/feross

8261 0

『手撕Vue-CLI』自定义指令

前言最近一直忙于工作项目上面的事情，精力少了很多，所以一直没更文，很多技术点，都做在我自己的 Notion 笔记库中，今天，我决定要改变一下方式，所以又重新来更文了。...到这里，大家应该对 Vue 的使用都已经非常的熟练了，在 Vue 中，除了有 Vuex，VueRouter，在 Vue 全家桶中还有 Vue-CLI（Vue 脚手架）因为我们在企业的开发当中，想要快速生成项目的基础结构...手写 Vue-CLI，尤其是对于前端开发者来说，可以带来多方面的好处，可以深入地理解框架的工作原理和内部机制，有助于我们提升编程技能，增强问题解决能力，因为在手写 Vue-CLI 的过程中，会遇到各种各样的问题和挑战...nue-cli 再执行 nue-cli 之前我这里说一个注意点就是我们的项目的包名不能是你指令的名字，否则会报错：这里是我的问题，所以我们需要修改一下：看到了打印内容了，是因为我在 index.js...通过 npm link 命令将这个指令链接到全局还有一个注意点就是我们的项目的包名不能是你指令的名字，否则会报错。

1533 2

让vue-cli初始化后的项目集成支持SSR

2.2 初始化确保 vue-cli 安装成功，执行命令: vue init webpack vue-prerender-demo //此文章都是在webpack基础上配置的回车之后构建工具会提示一些项目信息的相关设置...初始化完毕： cd vue-prerender-demo npm install npm run dev 进入项目，安装完毕，启动项目，确保项目正常工作。...3.3 准备工作使用 vue-cli再次初始化一个项目: vue init webpack vue-ssr-demo 然后， cd vue-ssr-demo npm install npm run dev...确保初始化的项目可正常运行，接下来开始慢慢折腾吧~~ 3.4 开始折腾 1....$mount('#app')挂载到服务端生成的元素上，并变为响应式的。

2.3K5 1

Tomcat下部署vue项目

:8080/saas/ 2.第一种方式：ip+端口（前端后端修改）范例：vue-cli 项目使用路由，tomcat 作为服务器，项目文件夹名 saas 步骤： 1.修改配置文件 router.js export...其中的 saas 就是 webapps 目录下的项目名称（文件夹名） 3.第二种方式：ip+端口+项目名（前端修改）范例：vue-cli 项目使用路由，tomcat 作为服务器，项目文件夹名 saas.../dist"),//构建输出目录,也就是构建后的东西都扔这里 assetsSubDirectory: "static",//源子目录除了index.html，其余的js img css都分在这里.../**添加结束**/ } 4.webpack 设置不打包文件WEB-INF 到此处已经可以成功配置一个 tomcat 服务下的 vue 的 history 模式的项目，但是不能每次打包去手动添加和更改新建...tomcat 下 vue 的 history 模式项目最终目录如下图 6.注意 vue-cli 3.x vue-cli 打包配置还需要设置以下内容： module.exports = { publicPath

3.3K2 0

什么才算是真正的编程能力？

在周围人看来似乎好像我很厉害，做了那么多东西，但是我发现这些东西虽然是我做的，但是实际上我手把手自己写的代码却并没有多少，很多都是用开源的东西，我写的代码无非是把别人的东西整合下，类似于胶水一样的工作。...我之前所认为的编程是全手动一行一行敲代码，但是现在我发现哪怕是工程上，也有很多人是复制黏贴来解决问题的，并且提倡不要重复造轮子。...不能拆的轮子就像那一篇篇丢了曲谱的宋词一样，能读，却不能唱。鄙人不才，正在自己研究怎么设计建造一种既好用又好拆的轮子。您没那么幸运，恐怕是等不到鄙人的技术做出来并发扬光大了。...在那之前，多造轮子，多拆好拆的小轮子，应该是提高编程能力最好的办法了。以上。嗯。（文章属个人观点，与本人工作雇主无关。）...但做项目的时候，太多的东西要考虑，有时候，宁可简单易读，也不用快那么一点点；有时候，要做太多看不到的工作，却丝毫马虎不得；有时候，写了不如不写，留白也是一个学问。

1.1K6 0

使用Vue-cli搭建项目教程

使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，Github仓库安装 Node.js 首先需要安装node...安装vue-cli 生成项目 cd进入项目目录 vue init webpack VueProject 配置完成后，可以看到目录下多出了一个项目文件夹cd进入vue.js 项目 cd VueProject...然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖 cnpm install 启动项目 npm run dev 爬坑日记如果浏览器打开之后，没有加载出页面，有可能是本地的...另外我还将 build 的路径前缀修改为 ‘ ./ ‘（原本为 ‘ / ‘），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ‘ / ‘ 开头，在本地是无法找到对应文件的（服务器上没问题...项目开发完成之后，可以输入 npm run build 来进行打包工作打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看项目上线时，只需要将 dist 文件夹放到服务器就行了

6983 0

vue-cli

首先拿vue-cli小试牛刀，再决定后续要不要继续这个系列. 我一直在思考我们编程主要在做什么？我们有一大部分工作就是选择各种工具/库/框架，来黏合业务....这种说法很有争议，就像程序=算法+数据结构不能完全表达现今的软件工程一样, 说我们的工作就是堆砌工具，黏合业务, 一定程度上有自贬的意思。但这确实是大部分程序员的真实写照。...这些开源项目就是巨人，站在巨人肩膀上显然省事多了只是技术栈罗列未免过于简单，笔者还希望从这些项目中学点东西，比如他的设计和项目组织. 我会尝试简化和通俗解释里面的关键知识或亮点, 但是不求甚解。...CLI 也是这个指导思想下的产物, 例如通过它提供的 CLI，可以在15 分钟内构建一个简易的博客, 可以通过 CLI 启动服务器和 REPL、生成项目脚手架、生成代码文件、路由、数据库迁移等等: image.png...中按着这个命名约定的依赖会被识别为 vue-cli 插件，另外命名约定也有利于在 github 或 npm 上筛选生命周期: 一个插件的生命周期可以分为安装阶段和运行阶段. vue create命令创建项目脚手架

3.1K1 0

Vue + Webpack 将路由文件分拆为多个文件分别管理简明教程

Vue + Webpack 将路由文件分拆为多个文件分别管理简明教程近日，有网友留言，询问，如何将 vue 的路由分拆为多个文件进行管理。这当然是可以的。...今天我就来写一个简单的教程，希望对大家有所帮助。 ? 事实是，如果你的项目不是特别大，一般是用不着分拆的。如果项目大了，那就需要考虑分拆路由了。其实，这个操作并不复杂。...当我们用 vue-cli 工具，创建一个新的 vue 项目时，就已经给大家新建好了一个路由文件 src/router/index.js ，内容如下： import Vue from 'vue' import...vue 组件，然后再引入 news 的子路由配置文件即可。...frame/frame 子路由视图 vue 组件子路由视图组件就异常简单了，如上，三行代码即可 router/news.js

1.1K3 0

Vue2全家桶之一：vue-cli

(vue-cli,vue-router,vue-resource,vuex)还是都要上的。...② 全局安装vue-cli，在cmd中输入命令: npm install --global vue-cli （我已经安装过，为了更直观我在电脑上重新演示下）安装成功：安装完成之后输入 vue...（dxl_vue）作为项目存放地，然后使用命令行cd进入到项目目录输入： vue init webpack baoge baoge是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹...输入命令后，会跳出几个选项让你回答： Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name...(Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。

5524 1

如何Vue-cli开始使用在Vue.js项目中启动TDD（测试驱动开发）

现在我们一起在一个新的Vue项目开始测试工作，通过默认的测试，然后添加一些我们自己想做的。设置启动TDD的最简单方法是使用Vue-cli工具。...如果你还没有使用过它，Vue-cli工具提供了你从命令行开始进行一个新的Vue项目的方法。当你使用Vue-cli脚手架启动项目，所有你需要做的就是按照提示然后测试会自动为你设置。这有多容易？...最后，选择是否运行run npm 或者yarn 安装后，它会为您生成项目。哦，我们有了一个新的测试，已经为我们构建了Vue项目！...我们的文件结构应该如下所示： ? 我们可以看到，Vue-cli做了大量的工作，我们！虽然这里有很多内容，但对于本教程，我们只关心测试和SRC目录。 ?...要检查是否正常，请尝试注释一个链接，以确保它像我们预期的那样失败。总结我们在这次演练中已经讨论了很多。我们开始把我们的项目和Vue-cli运行。然后，我们查看了默认测试，看看它们是如何工作的。

1.2K1 0

ViteConf 2022回顾：Vite是如何诞生的？

RequireJS 是在开发环境下及时加载和转化模块的，可以通过编写插件来及时编译代码，它还支持通过打包命令来构建生产项目。...于是在2015年，尤雨溪做了 vue-cli，这是一个基于 Webpack 构建的 Vue 脚手架。vue-cli 做了很多如今已经成为标准的工作，例如预配置，即大部分通用功能可以开箱即用。...为了达到这样的配置效果，基于webpack进行构建还是有很大工作量的，并且还要兼顾不同的配置，例如，是否使用 TypeScript，使用哪个测试库来运行测试用例，以确保这些配置项的不同组合可以正常运行。...但是，最终 1.0 版本并未落地，因为在开发 1.0 时，尤雨溪意识到 Vite 并不仅仅是 vue-cli 的替代品，Vite 其实可以做两件事：作为与框架无关的最小配置打包工具来提供给用户，这本质上是一个更通用的...组建团队尤雨溪的时间和精力被分散到了 Vite 和 Vue 两个项目中，仍然需要确保 Vue 可以正常迭代。因此，在 2021 年 3 月正式组建团队。

6612 0

深入认识 vue-cli：能做的不仅仅是初始化 vue 工程

vue-cli初始化项目的原理从官方文档可以知道，vue-cli使用了download-git-repo这个工具去下载远端git仓库里面的工程，如果加上了参数，则会在内部运行，通过克隆的方式把远端...明白这一点至关重要： vue-cli并非从无到有地凭空生成一个项目，而是通过下载/拉取已有的工程到本地，完成生成项目的工作。而这个“已有的工程”，就是所谓的“模板（template）”。...简单来说，就是vue-cli不仅仅能初始化vue工程，理论上能够初始化一切工程，包括react，angular等等等等，只要你有一份能够运行的模板，就能够通过vue-cli进行工程的初始化。...“vue-cli中发现项目跑不起来” …… vue-cli说：“这锅我不背。” 是的，所遇到的问题都不是vue-cli的问题，而是相关模板的问题。那么应该如何写一份合格的模板呢？...写一份vue-cli模板参考官方文档，也许还是不能理解到底应该怎么写，那么我们可以直接参考官方例子webpack-simple，看看它到底是怎么写的。

8928 0

node、npm、vue安装 -- VUE 项目 demo 实例

用 vue-cli 构建项目（windows 和 linux 都可以按此方法构建）选择一个确定目录 D:\node，作为项目存放目录。...注意：这里不能使用大写，所以我把名称改成了vueclitest Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。...这时应该在路径 D:\node下已经生成项目：firstApp ，结构如下（在这一步还没有文件夹：node_modules，后面才会生成。）...项目结构说明： build：最终发布的代码的存放位置。 config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。...src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件： assets:放置一些图片，如logo等 components:目录里放的是一个个的组件文件

7793 0

从零实现一套属于自己的UI框架-发布到npm

(y/N) 看项目需要，我这里选择 N。回车后，系统会自动帮我们把选择的配置集成到模板中，然后生成一个完整的项目。 ?...由于我们更改了原项目的目录结构，使得系统本地运行以及打包找不到对应的目录，我们需要在项目的根目录中创建一个vue.config.js文件夹手动的去修改webpack配置，使得系统本地运行和打包正常。...常见的emoji有：:art: 、 :ambulance: 、:lipstick:等等将代码发布到npm 由于我们开发的组件库是给别人用的，我们没有必要把所有的代码都发布到npm上。...npm的源要使用npm的源，不能使用淘宝源或其他的。...上传到npm上时，要将package.json中的private属性值改为false 修改源码后发布到npm时一定要更改项目的版本号总结相信只要从头看到尾的小伙伴就会发现，封装一个组件很容易，主要的工作在于

1.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云