在使用vue-cli创建vue项目时，可以自动生成webpack文件。使用 npm run build即可打包发布生产文件，打包后的文件webpack配置 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件打包在css目录下app.hash.css文件中。 但我们会发现发布后，会存在字体文件找不到的问题，查看css文件发现是iconfont字体文件的路径引用问题。解决方法： 在build/utils文件中的下图所示位置添加../../公共路径这...
webpack的dev-server只能匹配get请求，在本地做本地数据的时候会很不方便。 可以使用如下两种办法解决： 1.在webpack.config.js配置文件中的devServer字段加入 devServe:{setup: (app) => { //解决post没响应的问题app.post(/goform/**, function(req, res) {res.redirect(req.originalUrl); //重定向到对应路径});} } @webpack3.0以后的版本setup需要改成before 2.在node_modules里找到webpack-dev-server/lib/server.js中，在Se...
最近遇到这个需要单页访问跨域后台的问题。可以按照如下设置： proxyTable: { /list: { target: http://api.xxxxxxxx.com, pathRewrite: { ^/list: /list } } }这样我们在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.那么又是如何解决跨域问题的呢？其实在上面的list的参数里有一个changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域...
Webpack dev server使用http-proxy解决跨域问题文档资料webpack关于webpack-dev-server开启proxy的官方介绍Vue-cli proxyTable 解决开发环境的跨域问题——虽然这篇是写vue的，不过用在webpack-dev-server上也是一样的http-proxy-middleware——webpack-dev-server的实现方法其实是对这个的封装 配置http-proxy在webpack的配置文件（webpack.config.js）中进行配置module.exports = {...此处省略一万字// webpack-dev-server的配置...
这两天一直在练习这个webpack4, 发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神！ webpack4 在配置上其实是可以是想production和development的， // webpack.config.jsmodule.exports = {// webpack会根据mode进行对Js打包，development压缩，production下面自动压缩，亲测没有问题mode: development // production }但是从js里面分离出来的css怎么打包呢？ 我找了一天的相关...
遇到的问题 使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错。 在网上查找了一下，原来是HTML5 History 模式引发的问题，具体为什么，vue官方已经给出了解释，你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了，官方给出的解决方案中没有说tomcat下，怎么决解。 解决方案 根据官方给出的解决方案原理 你要在服务端增加一个覆盖所有情况的候选资源...
问题项目在开发环境下工作正常，当打包后图片不见了，检查元素后发现路径出错了。图片路径是这样：background: url(/static/img/bg_camera_tip.bd37151.png)，但该路径下文件并不存在。打包后文件目录如下：可以看到背景图片的路径应该是../../static而实际却是/static，找到原因后就好解决了 方法一查看build目录下webpack.base.conf.js的配置，图片文件会经过url-loader处理。module: {rules: [...{test: /\.(png|jpe?g|gif|svg)...
一、设置代理的原因 现在对前端开发的要求越来越高，并且随着自动化以及模块化的诞生，前后端开发模式越来越流行。后端只负责接口，前端负责数据展示、逻辑处理。但是前后端开发模式，有一个重要的问题，就是跨域问题。 二、如何配置webpack的代理 webpack代理需要另外一个插件：webpack-dev-server webpack-dev-server配置代理非常的方便，只需要条件一个proxy属性，然后配置相关的参数就可以了： var webpack = require(webpac...
优化对比 ：未优化前：index.html引入一个main.js文件，体积2M以上。优化后入：index.html引入main.js、commons.js、charts.js、other.js。以达到将main.js平分目的。每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具： vue、webpack、babel、highcharts、echarts、jquery、html2canvas******此去省略若干m代码 问题：开发环境用webpack后发现单个js文件5m。生产环境借助vue-cli的webpack配置，减少到2m。 解决方案...
今日使用 npm init webpack love 创建一个新项目，然后执行 npm run dev 之后项目报错，提示错误如下： 没有给这些选项指定值：config-name, context, entry, module-bind, module-bind-post, module-bind-pre, output-path, output-filename, output-chunk-filename, output-source-map-filename, output-public-path, output-jsonp-function, output-library, output-library-target, records-input-path, records-output-path, ...
问题 vue init webpack myproject构建项目 使用localhost 或者127.0.0.1 均可以正常访问，但是切换到本地ip就不行了 解决方式 在 webpack.dev.conf.js 追加以下代码 const HOST = process.env.HOST || 0.0.0.0; 重新启动 npm run dev重新打开即可以上这篇vue init webpack myproject构建项目 ip不能访问的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
在vue单页面应用中，我们大概都会使用CommonsChunkPlugin这个插件。 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题，打包上线后却会报错 webpackJsonp is not defined。这是因为公共文件必须在自己引用的js文件之前引用。 可以手动改文件引用，但是推荐以下解决办法： 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件，添加如下配置即可 chunks: [manifest, vendor, app] 以上这篇解决vue项目报错w...
问题：在项目开发时使用字体图标，报错如下：所有的字体图标都不能正常显示了，报错提示不能解码字体。 解决问题：找了很久，最后发现是在webpack配置的时候自己手动添加了下面的代码而引起的错误：在 webpack.base.conf.js文件中删除 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: file-loader }, 总结： 其实采用vue-cli 自动生成的配置文件已经完成了字体图标文件的编译，自己写的和自动生成的产生冲突 以上这篇webp...
最近用vue-cli+vue-router+webpack建立项目，其中的遇到的三个问题，整理如下： vue-cli+ webpack 建立的项目，cnpm run build 打包项目之后，需要放在http服务器上才可以运行， 例如 ：nginx vue单页面的启动页面是index.html,路由的路径实际是不存在的，所以会出现刷新页面404的问题，需要设置所有找不到的路径直接映射到index.html 1 刷新页面404配置启动文件的index页面的路径root: D:/workPlace/mex-adx-web/mex-adx-web/dist...
最近写了一个vue小项目，不想单独作为一个web项目发布，所以就准备放到资源项目的public文件夹下，遇到一些小问题，在此总结一下。 资源路径如下：public目录配置的访问路径为”/”，在这样的情况下，我们的访问路径就变成了”域名/vue-demo”。访问的时候发下程序未报错，但是页面一片空白。此前也这样发布的项目都没有问题，但这次是怎么回事呢？ 仔细探索后发现是vue-router搞得鬼。因项目需要，所以使用了滚动行为，滚动行为必...