解决vue项目报错webpackJsonp is not defined问题

在vue单页面应用中，我们大概都会使用CommonsChunkPlugin这个插件。 传送门 CommonsChunkPlugin

但是在项目经过本地测试没有任何问题，打包上线后却会报错 webpackJsonp is not defined。这是因为公共文件必须在自己引用的js文件之前引用。

可以手动改文件引用，但是推荐以下解决办法：

找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件，添加如下配置即可

chunks: ['manifest', 'vendor', 'app']

以上这篇解决vue项目报错webpackJsonp is not defined问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 解决vue+webpack打包路径的问题
  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法
赞 (0)

相关推荐

  • 解决vue+webpack打包路径的问题

    最近写了一个vue小项目,不想单独作为一个web项目发布,所以就准备放到资源项目的public文件夹下,遇到一些小问题,在此总结一下. 资源路径如下: public目录配置的访问路径为"/",在这样的情况下,我们的访问路径就变成了"域名/vue-demo".访问的时候发下程序未报错,但是页面一片空白.此前也这样发布的项目都没有问题,但这次是怎么回事呢? 仔细探索后发现是vue-router搞得鬼.因项目需要,所以使用了滚动行为,滚动行为必须开启history模式,在

  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好.本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下. 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环境.百度搜索node,进入官网根据自己的操作系统进行下载即可.现在的版本都是自带npm的了.所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息.那么说明安装

  • 解决vue项目报错webpackJsonp is not defined问题

    在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

  • vue init webpack 建vue项目报错的解决方法

    使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

  • Vue项目报错:parseComponent问题及解决

    Vue项目报错:parseComponent问题及解决

    目录 Vue项目报错:parseComponent 报错内容 解决步骤 Vue常见错误及解决办法 1.在配置路由并引入组件后 2.在组件中的标签和样式中图片路径出错时 3.在组件中标签没有闭合 4.在使用less定义变量是报错 本地开发环境请求服务器接口跨域的问题 Vue项目报错:parseComponent 报错内容 ERROR  Failed to compile with 1 error                                                    

  • Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法

    Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法

    目录 问题: 一.public下的index.html没有引入其他外部js文件. 二. public下的index.html引入其他外部js文件. 原因一.引用文件的位置不正确 原因二:配置信息不正确 原因三:script的引入类型不对 总结 问题: 最近做vue项目时,当我访问二级路由的时候,就会报Uncaught SyntaxError: Unexpected token ‘<‘错误,而我访问一级路由不会报错.翻了网上很多资料,都无法解决. 一.public下的index.html没有引入其

  • vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339）

    问题描述: 今天早上一开机,打开项目,发现项目一片醒目的红色,查看报错原因提示: Property 'xxxx' does not exist on type 'CombinedVueInstance<{ readyOnly: unknown; businessPrice: unknown; travelStaffInfo: any; } & Record<never, any> & Vue, object, object, object, Record<never

  • 解决vue打包报错Unexpected token: punc的问题

    项目中有一个功能模块是使用Vue写的,然后蛋疼的来了,写Vue的同事走了,今天需要改,懵逼状态啊,这是什么?代码还没看懂,就给我出了一个Exception.记录一下,蛋疼历程. ERROR in static/js/app.33254a875dd731a0b538.js from UglifyJs Unexpected token: punc (() [./src/mixin/mixin.js:6,8][static/js/app.33254a875dd731a0b538.js:13,19] 好

  • 如何监听Vue项目报错的4种方式 

    如何监听Vue项目报错的4种方式 

    目录 背景 onerror element.onerror errorHandler errorCaptured error传播规则(划重点) 如何监听异步错误 总结 背景 在开发Vue项目时,使用浏览器调试可以比较清晰的看到报的什么错.在哪报错,或者使用console.log()打印出报错信息,以便快速定位到报错源头并解决,但是如果项目上线了又怎么查看呢.对于上线项目来说,一般都是会有代码混淆以及禁用console.log(),这个时候再使用浏览器调试就有点不太方便了.另一种场景,如果要做一个

  • 解决Maven 项目报错 java.httpservlet和synchronized使用方法

    使用java8 的lanmbe表达式时,使用java1.8编译,则会报错 需要在pom.xml的<bulid></build>中添加 <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>2.3.2</versi

  • Vue项目报错：Uncaught SyntaxError: Unexpected token <

    遇到问题: 今天做一个 VUE 的项目,在引入第三方依赖的 JS 文件时,遇到了一个问题: 控制台的提示:Uncaught SyntaxError: Unexpected token < 按照提示进入文件,再看如下图: 仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的. 解决方案: 解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下,引入路径也改成:<scr

  • Vue.js报错Failed to resolve filter问题的解决方法

    Vue.js报错Failed to resolve filter问题的解决方法

    之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错误. console控制台调试的时候,提示错误消息: Failed to resolve filter: HomePage console错误信息.jpg 我原来的写法: 原来的错误写法.jpg 错误原因: 经过自己的摸索,后来发现竟然是代码顺序错误问题. 由于先执行的pageList,后执行的Vue的过滤方法,最终调整过的写法: 修改后的正确写法.jpg 作者:=金刚= 文章地址:http://www.cnblogs.com

随机推荐