关于vue项目+webpack 打包的坑

最新推荐文章于 2022-04-15 20:12:29 发布
最新推荐文章于 2022-04-15 20:12:29 发布
阅读量331 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangshang1320/article/details/85062659
版权

今天遇到一个打包  npm run build 的坑    打包出来 发现不是html文件  而是index.vue文件，由于我是第一次用这个 ，然后网上查了很多资料  后来发现 在config/index.js里面的文件配置有问题

开发环境的是没有问题的，不过生产环境就有问题啦  下面是生产环境

 

 这里的  index 是输出文件的名字 ， 我之前没注意居然是index.vue  后来改成了html 就可以啦

assetsPublicPath:'/' 是输出公共路径 默认是static  这里需要改成"./"

wangshang1320
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue+webpack打包路径的问题
08-27
下面小编就为大家分享一篇解决vue+webpack打包路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
总结关于webpack
weixin_59124055的博客
09-22 498
Day01_webpack 铺垫(自学) yarn包管理器(可选) ==注意: 如果yarn实在安装不上可以用npm== 快速、可靠、安全的依赖管理工具。(类似npm作用) 中文官网地址: Yarn 中文文档 下载yarn 下载地址: 安装 | Yarn 中文文档 windows - 软件包(在笔记文件夹里) ==建议不要安装到中文路径下== ==建议和node安装到一个盘符下== mac - 通过命令安装(也可还用npm) sudo np
使用webpack打包vue项目
qq_42750982的博客
04-15 1万+
使用webpack打包vue项目 安装webpack工具，安装方式有两种：全局安装（命令：npm install -g webpack webpack-cli）以及安装在项目中，这里使用第二种： //在项目中安装，这里的-D表示运用到开发(development)环境 npm install -D webpack webpack-cli 在项目根目录新建一个webpack.config.js文件，配置打包时候需要的一些插件。**作用: 指示 webpack 干那些活(当你运行 webpack 指令
关于Vue - Webpack 项目打包出现的一些问题
热门推荐
lensgcx的博客
11-03 3万+
关于Vue - Webpack 项目打包出现的一些问题
vue-cli npm run build 打包问题 webpack@3.6
weixin_30627381的博客
09-10 415
1, vue-router 路由 有两个模式 (mode) hash (默认模式) 使用URL来模拟一个完整的URL 但是没个URL都会带上 "#/'' 支持所有浏览器 这个模式使用 redirect (重定向) 手动刷新页面会定到 第一个页面 history 模式 history.pushStateAPI 来完成 URL 跳转而无须重新加载页面 这个模式可去掉"...
关于vue的webpack打包优化问题
weixin_34245749的博客
03-30 476
vue是一个单例页面，所有页面都是由js动态渲染，因此js的体积会越来越大，从而影像页面的渲染性能 1.异步组件 官方推出了异步组件路由，是一个解决js打包后体积过大问题的方案， 可以很好的吧vue组件按组区分，从而打出不同的js文件，解决了单一js打包大的问题。 复制代码 以下是一个异步组件打包的最终文件 后面的数字为hash值，为了js不会缓冲 app为vue以及vue-router等第三方...
vue2 + webpack5相适配的 能成功打包的 package.json 文件
08-25
vue2 项目 + webpack 打包工具，是一个非常经典的组合，但是在配置的过程中会老是出问题，例如：webpack、webpack-cli、vue-loader、vue-template-compiler、css-loader的版本的设定就是一个匹配的大问题；...
vue+webpack 打包文件 404 页面空白的解决方法
11-30
最近用vue-cli+vue-router+webpack建立项目，其中的遇到的三个问题，整理如下： vue-cli+ webpack 建立的项目，cnpm run build 打包项目之后，需要放在http服务器上才可以运行， 例如 ：nginx vue单页面的启动页面是...
vue2 + webpack4相适配的 能成功打包的 package.json 文件
08-25
vue2 项目 + webpack 打包工具，是一个非常经典的组合，但是在配置的过程中会老是出问题，例如：webpack、webpack-cli、vue-loader、vue-template-compiler、css-loader的版本的设定就是一个匹配的大问题；...
学些vue+webpack遇到的一些坑
weixin_34259232的博客
12-19 184
vue-loader和webpack版本冲突的问题 vue-loader 15.4.2的版本 和 webpack 4.28.0的版本在一起运行的时候 启动会报如下的错误。 上网没有搜到问题的原因 只是有人说是版本的冲突，执行npm i vue[email protected] 更改vue-loader版本到14.2.2后问题解决，如果有大牛无意中看到我这篇文章并知道原因的话，万望告知，谢谢。...
使用webpack打包后的vue项目如何运行（express）
weixin_30814319的博客
05-12 460
　　我们知道使用webpack打包vue项目后会生成一个dist文件夹，dist文件夹下有html文件和其他css、js以及图片等，那么打包后的文件该如何正确运行呢？ 　　倘若直接打开html文件，会报如下错误： 　　　　 　　那么该如何运行呢？其实可以将生成的dist文件部署到express服务器上运行。 　　（1）、安装express-generator生成器。 　　　　npm...
Vue高效的构建打包发布
Gesj
01-02 195
项目快结束啦，今天学习怎么优化打包项目，ヾ(◍°∇°◍)ﾉﾞ 在命令行中输入以下命令，在dist下生成report.html，打开可以看到每部分大小~ npm run build -- --report 在项目中较大的有moment.js，但是里面的语言包没有用到，因此在vue.config.js中配置如下，用于忽略语言包。再次打包后少了约210k。 优化moment.js： const w...
vue-cli webpack 项目打包后如何运行
11-24 3159
vue-cli webpack 创建的项目打包后生成的项目如何运行 1.项目打包 运行 nom run build 项目打包 会形成一个dist文件加，里面是打包之后的东西 在这里进行一下描述 dist 整个文件夹下的东西就是要运行在服务器端的所有东西，之外的任何东西都是本地测试的，不需要部署服务器上 2.如何运行打包后的项目 以express服务器为例 安装express 创建一个文件夹，在文件...
vue使用webpack打包生产时出现的错误和解决方法
u012967454的博客
01-31 1582
1.Failed to load resource: net::ERR_FILE_NOT_FOUND或者vue dist文件下的index.html没显示 （解决 ：考虑路径问题，在配置webpack ，output属性时设置所有路径添加./（publicPath:’./’）使得项目能进入到其所在的相对路径上 ./表示当前路劲下 从而通过这种形式修改添加publicPath解决vue项目生成文件时...
记一次Webpack打包优化及踩的坑
我不是大牛，我只是个搬运工！
05-07 4751
首先，关于 webpack 打包优化网上已经有很多文章，这里主要是做个记录。 我们的项目使用的框架: react + antd 。在打包时遇到的主要问题是： 1. 构建太慢，主要体现在生产模式下，三个项目同时构建，居然要6分钟之久； 2. 生产模式下打包出来的文件过大。（可能是文件存在重复打包的现象）； 3. 开发模式下太耗内存，经常出现内存被占满的情况。 开发模式下主要...
webpack打包vue项目之后怎么启动&注意事项
weixin_44415368的博客
06-10 1433
前端代码没有服务器可以部署到 express 服务器上运行 1.执行：npm run build 打包后生成dist文件夹 安装express-generator生成器 执行 $ npm install express-generator -g 进行安装 创建一个express项目 执行 $ express expressDemo （expressDemo是项目名） expressD...
webpack打包
Primise7的博客
02-07 1793
webpack是前端开发中比较常用的打包工具之一，另外还有gulp，grunt。之前没有涉及过打包这块，这里介绍一下使用webpack打包的流程。 Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），W
vue3+webpack
最新发布
11-04
Vue3是一种流行的JavaScript框架，用于构建用户界面。Webpack是一个模块打包器，它将...然后，您可以使用Vue3和Webpack创建一个最简单的开发环境，该环境可以解析.vue单文件组件，解析CSS，并可以正常启动开发和打包。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值