教你如何在vue-cli项目打包时避免踩雷(一)【早看早受益】

2024-05-13 16:08:13

前言

不管迎面来的是什么，我们都能坦然面对。且不管前路如何，今天有阳光，那么我们就拥抱温暖;当风雨来临的时候，我们已经储备了迎接寒冷的能量。等待生命的即便是命运的魔咒，至少我们享受了现在，珍惜了拥有!当生命的繁华落幕之时，我们应会少了几许惶恐，而多了一份坦然。

想要知道vue项目如何避免打包时的一些坑的，可以点个关注，后期会不断为大家更新，如何有效避免踩雷的文章，接下来进入正题！

vue-cli项目打包报错

Tip: built files are meant to be served over an HTTP server.

Opening index.html over file:// won't work.

报错原因

因为vue-cli的默认配置中,publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在 npm run build完成之后执行以下命令:

npm install -g http-server

解决方案

打开config文件夹下面的index.js
把assetsPublicPath:'/'改成assetsPublicPath:'./
不会出现空白页后，图片显示不出来。
解决办法：在build目录下的untils.js文件中
ExtractTextPlugin方法中添加publicPath:’…/…/'就可以了。

然后重新打包，问题解决。

大白话：

这个其实就是个提示并不是报错。

其实这句话是告诉我们 vue打包过后需要放在服务端才能预览打开如果不放在服务端不能正常运行的

如果你想正常打开运行可以这样操作

在你打包 npm run build 完成之后直接输入 npm install -g http-server 安装过后就可以打开了打包后的 vue项目了项目中使用了接口可能数据访问不了但是页面可以正常打开

教你如何在vue-cli项目打包时避免踩雷(一)【早看早受益】相关推荐

vue.js项目打包时出错找不到main.js
vue.js项目打包时出错找不到main.js 打包时设置了开发环境和生产环境的入口文件分别是配置打包文件vue.config.js(没有的话新增) module.exports = {chainW ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
Vue项目9：Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目进入cmd命令行,输入如 ...
vue.js 项目打包APP应用包
vue.js 项目打包APP应用在hbuilderx编辑器使用的,vue.js 项目打包APP应用创建一个vue.js项目,写好移动端 vue.js 框架,APP项目完成. 1.在config配置 ...
elementui 样式渲染的慢_解决vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
electron+vue项目打包时修改注册表功能
electron+vue项目打包时修改注册表功能原因在使用electron做项目时,由于产品需要做一个放大镜功能.在查找了网上大部分类似需求后,发现大部分的放大镜都是对图片的放大,真正实现放大镜功 ...

最新文章

热门文章