最近用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…

vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } 将 limit 的值 调的大些 至少比你的字体文件大…

文件资源路径是对的,但是页面空白.百度了很久找了一篇文章解决了. 1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPub…

练手项目完结打包的时候遇到一些问题,特此记录 先贴我的vue.config.js文件的代码(vue-cli3构建的项目默认是没有此文件的,需手动添加)更多详细配置参考官方配置文档,我的项目不大不小,这些配置貌似就够了 module.exports = { // webpack配置,此处是因为我的项目打包时报错(WARNING in asset size limit: The following asset(s) exceed the recommended size limit ,因此有了这个w…

网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. assetsPublicPath默认的是 ‘/’ 也就是根目录.而我们的index.html和static在同一级目录下面. 所以要改为 ‘./ ’. 当资…

webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果. 注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应. 从配置的entry入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去. 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换. 递归完后得…

1.设置我们的路由配置文件(/src/router/index.js): { path:'*', component:Error } 这里的path:’*’就是找不到页面时的配置,component是我们新建的一个Error.vue的文件. 2.新建404页面: <template> <div> <h2>{{ msg }}</h2> </div> </template> <script> export default {…

为什么要配置多页面开发? · 由于单页面应用不利于SEO,对于某些资讯类网站不够友好,而多页面则能够更优的解决此问题. · 传统的多页面开发模式(如java的jsp等) 前后端耦合性大,开发效率低,代码复用率小. · 本文介绍通过目前流行的如React.Vue等前端框架结合webpack来进行多页面开发. 一.glob 模块介绍:(GitHub地址:https://github.com/isaacs/node-glob/blob/master/README.md) glob模块允许你使用 *等符…

最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后将打包文件缩小到665kb,效果十分显著,网上有许多解决办法,大多对新手都不是很友好,涉及到的知识点十分的多,导致一步一坑,虽然这边文章不是最好的,但通过如下的调试缩小其打包文件. 项目github连接 :https://github.com/2016Messi/webpack3-react-rou…

在看使用webpack打包的项目代码时,经常会看到在路径中引用@符号 import one from '@/views/one.vue' 那这里的@符号到底表示什么意思呢? 这其实利用了webpack的  resolve.alias  特性,webpabk.config.js  的配制代码如下,在webpack打包时,会把路径引用中的@符号,转换为相对应的路径. const path = require("path"); function resolve(dir) { return p…