个人vue项目启动打包常见问题及处理办法

已于 2023-02-20 20:45:14 修改
阅读量409 收藏
点赞数
分类专栏： 经验增长 文章标签： npm vue.js 前端
于 2021-11-03 14:55:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linxijm/article/details/121120995
版权
在个人Vue项目中，启动和打包时常遇到错误，如'Syntax Error: TypeError: Cannot read property 'range' of null'。解决方法包括删除并重新安装node_modules，或者将babel-eslint降级到稳定版本如7.2.3。
摘要由CSDN通过智能技术生成

常见问题及处理

提示vue-cli-service build

问题：node_modules文件的缺失

解决方案：

npm i

Syntax Error: TypeError: Cannot read property 'range' of null

解决方案

方法一
删除node_modules
重新安装：npm/cnpm install

方法二
可能是babel-eslint版本问题：
常见出问题的比如"babel-eslint": "^10.0.3"
解决方法一：可更换至稳定版本cnpm i babel-eslint@7.2.3

 Failed to compile with 1 error                                                                 8:42:16 ├F10: PM
┤

  TypeError: compilation.templatesPlugin is not a function

  - SetVarMainTemplatePlugin.js:17 SetVarMainTemplatePlugin.apply
    [vue]/[webpack]/lib/SetVarMainTemplatePlugin.js:17:15

  - Tapable.js:79 Compilation.apply
    [mpm-sp]/[tapable]/lib/Tapable.js:79:16

  - uti
最低0.47元/天 解锁文章
linxijm
关注
专栏目录
升级nodejs后vue打包失败
hannah2233的博客
10-07 564
因为最近需要做一个react+vite的项目，因为一个依赖包的缘故，被迫将node从14升级到16。
vue项目打包总结（babel安装问题、打包后直接访问dist文件夹、elementui样式失效等）
是日前端
11-11 4433
官方文档有简单的方法: npm install -g serve(全局安装) serve -s dist(运行打包后的文件)
JS TypeError: Cannot read properties of null (reading ‘getAttribute’) 解决
最新发布
qq_34419312的博客
08-20 2853
JS TypeError: Cannot read properties of null (reading ‘getAttribute’) 解决
Syntax Error: TypeError: path must be a string
qq_37291367的博客
11-29 1024
环境：vue-cli4 vue3 stylus yarn serve之后的报错：Syntax Error: TypeError: path must be a string debug：试过重新安装依赖包等，均无法解决。而后仔细查看报错信息，如下 Syntax Error: TypeError: path must be a string @ ./node_modules/vue-style-loader??ref--12-oneOf-1-0!./node_modules/css-loader/dist/
解决vue项目启动时报“ Cannot read property ‘range‘ of null ”问题
core815的专栏
08-18 387
cnpm i babel-eslint@8.0.2
vue项目本地正常运行，打包到线上时无法访问js等资源
生而为人我很抱歉
12-11 1538
config/index.js文件的build/assetsPublicPath应该配置成和nginx（或tomcat）一致。
Springboot项目与vue项目整合打包的实现方式
08-25
Springboot项目与Vue项目整合打包的实现方式 在现代软件开发中，前端和后端项目的分离开发和集成是非常常见的。在这种情况下，我们需要在开发时将前端和后端项目分离，以便于更好地维护和更新代码。但是，在部署时...
VUE项目初建和常见问题总结
10-16
Vue.js 是一个流行的前端框架，用于构建用户界面。在创建Vue项目时，首先需要确保已经...以上就是Vue项目初始化和开发过程中的常见问题及解决方案，以及项目基本结构的概述。理解这些知识点有助于顺利进行Vue项目开发。
解决Vue 项目打包后favicon无法正常显示的问题
12-07
然而，在使用Vue.js框架构建项目时，可能会遇到打包后favicon图标无法正常显示的问题。这个问题通常与资源路径配置有关，尤其是在使用本地图片作为favicon时。下面将详细探讨问题的根源，以及提供一种可行的解决方案...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
10-16
webpack打包vue项目之后生成的dist文件启动运行的方法涉及到多个步骤和知识点，包含了Vue、webpack、Express以及Node.js的综合运用。下面将详细解析每个步骤背后的原理和技术点。 ### webpack打包Vue项目 webpack...
彻底解决 Cannot read property ‘range‘ of null 错误的几个方案和后期造成的一劳永逸的方案
热门推荐
禅思院
01-09 3万+
vuecli3.* npm run serve 报 Cannot read property ‘range’ of null 错误几种解决方案以及避免后期造成的一劳永逸的方案 前言 今天由于我们组的部分人，代码等各种因为的问题，造成版本混乱，多余等等，不利于维护，作为leader的我，为了后期项目更好的今行，特意整理下问题，npm install之后 npm run serve 莫名的运行 np...
项目无法启动Syntax Error: TypeError: Cannot read property ‘range‘ of null；Syntax Error: TypeError: Cannot
phhz的博客
11-08 1643
前端vue2启动报错
Error: TypeError: Cannot read property ‘range‘ of null
weixin_46600931的博客
07-12 636
导致这个原因是"babel-eslint": "^10.0.1",版本过高，我是的使用vue2.6,webpack :^3.0.6,
vue 启动报错：TypeError: Cannot read property ‘range‘ of null
qq_41999034的博客
10-14 1万+
错误： vue项目启动时，报错：TypeError: Cannot read property ‘range’ of null 原因： babel-lint版本过高问题导致。 高版本插件一般容易出错，最稳妥的方法就是降低本地插件版本，使用稳定版就行开发 解决方法： 方法1： 这是在网上看到的方法，不过在我本地测了无效，或许你们可以尝试一下： 关闭项目，在本地打开项目文件，将node_modules文件夹删除； 重新在编辑器打开项目，使用 npm install重新安装依赖包。 启动项目。 方法2： 本人就是
vue 项目打包时遇到的一些问题
小龙狗的博客
01-23 1万+
标志是在v7中引入的，目的是绕过peerDependency自动安装；它告诉NPM忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。[1].【前端开发技巧】npminstallxxxx--legacy-peer-deps到底做了些什么。[2].解决高版本npm无法解析依赖树的报错npmi--legacy-peer-deps。[4].node，npm，vue升级到指定版本。...
TypeError: Cannot read property 'range' of null
u014026084的博客
04-24 1万+
刚开始学习vue，按照教程，执行cpm run serve/start/dev命令启动项目时，报Cannot read property ‘range’ of null错误。然后在网上查找原因，得出的结论是该问题是"babel-eslint"版本更新问题导致的， 既然找到原因了，那就想办法去解决问题，但是问题好定位，解决却遇见了一些问题。 1、删除node_modules 这是在网上能找到的最多...
vue打包（npm run build）
岁末zzz的博客
02-11 8141
一、vue项目的创建 1、首先第一肯定是要有Node.js及npm这个不多说了 2、安装脚手架 二、vue项目的打包 1、大家都知道使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的， 此时需要修改config/index.js里的assetsPublicPath的字段，初始项...
Vue项目启动：详解Vue实例与关键配置
本文档主要介绍了Vue组件实例的学习以及项目启动过程。在Vue开发中，创建一个Vue应用的核心是通过`Vue`构造函数实例化一个Vue实例对象。当直接打开`index.html`文件并引入打包后的Vue代码时，这个过程可以分为以下几...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值