vue引入外部js打包出错，vue引入外部js文件

vue正式和测试环境打包后的文件资源不一致

1、webpack 配置文件配置 output ，你配置的为多个js，他就输出多个js文件，配置为一个就输出为一个。

2、将dist文件夹压缩（7-Zip打包成.tar文件），通过rz-be上传到Linux服务器，放在nginx的html下，tar-xvf解压，Linux上服务器nginx配置信息和版本与本地nginx的信息都是一致的。

3、Step在config下创建test.js文件Step在封装的axios.js的文件夹下创建config.jsStep在封装的axios引入config.js封装的get 和post请求Step在config文件下的index增加test模块（可复制build）并更改相应的参数。

4、在使用vue-cli脚手架打包后（UI用的Element-ui），发现vendor文件很大，将近1M左右。后来翻阅资料才明白，原来webpack把所有的库都打包到了一起，导致文件很大。

5、serve 命令不携带 --mode 时，默认运行环境为 development build 命令不携带 --mode 时，默认运行环境为 production 可根据当前环境写死，也可在环境配置文件中，加入打包到的文件夹名（有多个环境的时候比较方便）。

6、Vue.js的构建过程中，会进行代码的优化和压缩，以提高应用的性能和加载速度，这包括移除未使用的代码、合并和压缩文件等，这些优化过程可能导致生成的最终文件与开发环境中的文件不完全一致，从而导致界面的变动。

相关问答

Q1: 【前端】vue项目同时引入elementUI和ant-design后,导致打包失败的解决...

VUE同时引入elementUI和ant-design后，可正常运行，但会导致打包失败，且在启动时会输出错误语句。

通过 vue-cli 创建的应用，安装了 ant-design-vue ，并通过 babel-plugin-import 进行按需引入。

vue整合elementui后依然提示没找到依赖解决方法是：进入当前vue项目目录，查看package.json文件，是否有elementui依赖。没有则利用npm方式在当前项目路径下打开cmd，输入npmielement-ui-S进行依赖引入。

前端页面主要使用vant+postcss-pxtorem+lib-flexible，后端管理页面主要是使用elementUI进行开发。

Ant Design Vue：借助Ant Design的设计理念，为Web应用增添了专业的企业级风格，丰富的组件和主题使其在项目中大放异彩。

在子组件直接点击关闭时会导致报错(单向数据流问题)。解决方法就是在父组件操作关闭事件，并用第三个变量来控制显示与隐藏。并在visible后加.sync。ElementUI Form表单验证不通过，明明有值， 验证的错误信息不消失。

Q2: vue打包直接修改js没用

vue打包的js不要有影响。如果通过import来导入变量的话，在打包的时候其实已经作为常量资源打到了项目代码中，所以你直接修改会不起作用。

创建js文件。index.html中引入这个js文件，在vue.config中调用免打包配置文件，现在在界面中就可以拿到js中定义的常量config，可以直接在界面上使用。浏览器本质就是一款软件，安装在操作系统之上。

有些版本的vue2+webpack模板里没有这行配置，会导致比如你的z-index值被优化（坑）到你没脾气。

Q3: vue项目uglifyjs打包报错

也就是说uglifyjs老了，官方都停更了。现在推荐采用terser-webpack-plugin。

static/js/main.ef91b76js from UglifyJs Invalid assignment [./~/query-string/index.js：8，0][static/js/main.ef91b76js：53918，30]由于此时使用的query-string@6但是不兼容，打包出错。

下载并安装NodeJS for Windows 0.5 或进入NodeJS官网下载最新版本。查看版本：运行cmdnode -vnpm -v如果上诉两个命令出错，请打开系统环境变量Path，直接点确定。再试。

另一种使用方式是，把UglifyJS2包放到程序中，通过API对JS文件或JS代码进行压缩。首先，新建一个NPM项目文件package.json，然后在是下载UglifyJS2依赖包。

Q4: vue中高德地图资源引入index.html中,打包部署不了

高德地图本地可以加载出来，打包后部署环境上就加载不出原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。根据查询相关公开信息，去掉编译文件中map文件。

网络的问题。vue高德地图设置只能在某个范围内标点多数是网络连接异常导致。首先打开手机检查网络。其次打开进行测试网络连接是否异常。最后点击重新进入即可。

在Vue项目中，需要先引入高德地图的JavaScriptAPI，并初始化地图实例。可以在Vue的mounted()生命周期函数中进行初始化。使用AMap提供的API，创建需要调整位置的地图控件。

首先你需要提交你的公司的资料信息，地址信息 ，公司名称 以及电话信息，门脸照片给官方，提交给官方后，他们会审核的，一般都是 1-7个工作日审核 审核通过后1-3天时间展现 如果发现地图有错误，可以进行纠错处理。

Q5: vuejs项目打包后可能会出现的问题有哪些

问题描述在项目开发中，当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题，控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。

在本地运行样式没问题，打包后到测试环境，就出现问题，可以看到加载的css顺序变化了。统一修改某个class，本地为A覆盖了B，打包后可能为B覆盖了A。查找了很多文章都说是加载css顺序不一样导致的，的确如此。

您要问的是vue打包直接修改js没用是怎么回事？原因如下。忘记重新启动开发服务器。修改node_modules中的文件，并不会触发热更新，需要手动重启服务器才能生效。

打包前一切ok，打包后唯独有一个接口出现了问题。试了很多种方法譬如：1，修改路由模式。2，修改publicPath。3，清空浏览器缓存。发现都没用。但是突然想到，为什么就只有一个接口出现这个问题。最后发现接口这里少了个斜线。

vue引入外部js打包出错的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue引入外部js文件、vue引入外部js打包出错的信息别忘了在本站进行查找喔。