xm2by的博客

webpack输出文件名设置chunkhash时在开发环境报错问题的解决报错如下：原因：从报错提示中可以看出使用hash来解决该报错，为什么呢？这是因为chunkhash不可以与热更新一起使用。解决方法：在开发环境我们需要使用热更新来实现修改内容实时刷新，但生产环境是不需要的，因此通过根据npm脚本中的环境变量来区分开发与生产环境，以此来决定filename使用chunkhash还是h...

使用vue-cli离线创建项目1、手动下载vue模板2、将下载的模板压缩包解压，修改文件名为wepback并放入到C:\Users\自己电脑的用户名.vue-templates文件夹中3、执行命令：vue init <template-name> <project-name> --offline...

localhost改ip后无法访问

vue-cli创建项目配备element、less、axios等工具

webpack消除项目中console语句项目开发调试时，写一些console语句将变量打印出来可以很方便调试代码，但是到正式环境，如果不去除console语句，一方面打开控制台会有很多数据打印出来，不规范，另一方面就是容易造成一些敏感数据泄露；对于项目比较大的，如果手动的去删除console语句，将会是一个不小的工作量，不过webpack的uglifyjs-webpack-plugin插件可以...

webpack的copy-webpack-plugin插件webpack的copy-webpack-plugin插件的作用是将项目中的某单个文件或整个文件夹在打包的时候复制一份到打包后的文件夹中（即复制一份到dist目录下）。效果如下图所示：使用方法：给项目中添加copy-webpack-plugin插件：npm install -D copy-webpack-plugin然后we...

webpack的clean-webpack-plugin插件在使用webpack打包时，打包后的文件名如果一样，那么每次打包后，新生成的文件就会将之前打包的文件覆盖掉，但是如果给输出的文件名设置根据内容生成的hash值后，由于每次打包后生成的文件名的hash值会不一样，这样就不会因文件名相同而覆盖原来的文件，在文件目录中出现了一些多余的文件；如果每次都手动清除这些多余文件也是很麻烦的，webpa...

解决使用vue-cli3创建项目时在git下交互提示符没反应问题vue-cli3下我们使用vue create命令来快速创建项目，在window下会遇到交互提示符不工作的问题，如图所示：vue-cli官网给出了两种解决方法：下面对它们具体实践一下：方法一：第一种比较简单，就是将vue create命令改为winpty vue.cmd create命令，如下图所示：方法二：第二种...

vue项目中实现pdf文件预览功能最近遇到一个实现pdf文件预览功能的需求，分享一下实现方法：pdf预览相对word、excel、ppt等文件的预览比较容易，因为常见的浏览器都是支持pdf文件直接预览，所以最简单的实现方法就是在浏览器中直接输入pdf文件存放在服务器上的路径地址就可以直接预览；1、使用浏览器默认支持访问pdf文件的功能1.1、当后端返回的是pdf文件在服务器上的路径时，直接...

如何在vue项目中引入json数据文件？方法1：可能会出现的问题：方法2：参考文献：[1]

项目npm install时报错phantomjs-prebuilt@2.1.16安装失败问题：通过git clone命令克隆项目后，运行npm install安装项目所需的依赖包时，出现如下错误：Failed at the phantomjs-prebuilt@2.1.16 install script，意思就是phantomjs-prebuilt@2.1.16安装失败，如图所示：解决方...

vue项目打包后favicon无法正常显示 vue项目打包后favicon无法正常显示，原因可能是由于打包的时候没有配置favicon选项或者favicon路径配置错误。解决方法：在webpack.pro.config.js中的HtmlWebpackPlugin插件选项中配置favicon选项，其中favicon的路径是个相对路径...new HtmlWebpackP...

让vue-cli搭建的脚手架可以处理vue文件中postcss语法

vue项目中配置favicon图标如上图所示，页面顶部的小图标会让页面显得高大上，一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目，如果不手动配置，页面中是不会显示favicon图标。不配置是这样子的：favicon图标的配置也很简单，vue-cli默认帮我们安装了html-webpack-plugin（如果没有，可以自己npm安装），我们只需在html...

vue-cli脚手架构建的项目中引入iconfont图标方法 图标作为一种装饰，会让页面变得好看、简洁明了。iconfont是阿里巴巴提供的一个矢量图标库，我们可以在库中找到需要的图标，通过下载并引入到项目中就可以直接使用了。前提：使用vue-cli脚手架构建的项目1、选择需要的图标并下载2、解压下载后的文件并找到以下四个文件，将这四个文件放入到项目的assets文件夹中（为...

vue-cli构建的项目中图片路径以变量形式传入时显示解决办法直接将图片路径以变量形式传入时，页面时显示不出来的解决方法：使用require对图片路径进行引用；参考文献[1] vue-cil和webpack中本地静态图片的路径问题解决方案...

vue项目兼容IE浏览器 利用vue写出的项目打包后在IE浏览器下显示空白，是因为缺少babel-polyfill的缘故。解决方法：1、安装babel-polyfill包；2、在main.js文件中引入babel-polyfill；3、在webpack.base.config.js中将entry中的app: './src/main.js'配置改为：app: ['babel...

vue-cli配置代理参考文献：[1] vue-cli本地环境API代理设置和解决跨域[2] vuejs添加环境常量----多环境开发打包场景解决方案之一[3] vue-cli項目開發/生產環境代理實現跨域請求+webpack配置開發/生產環境的接口地址...

       webpack中webpack-dev-server是一个简单的web服务器，可以帮助我们实现代码的热更新，即在实际开发中只需保存修改完后的代码，不用手动刷新页面就可以看到效果。在使用webpack-dev-server时，会发现在对js、css文件中的代码修改时，可以很容易地实现页面热更新；修改html文件内容时，保存代码，页面并没有自动更新。（可以在html-hot-reload...