vue打包后dist的使用

article/2025/9/3 8:00:00

发现问题

vue项目完成打包出dist后准备打开index.html,发现居然页面是一片空白,f12一片报红。

分析问题

经过多次网上查询后发现这是由于vue打包时,脚手架会帮你配置好大量参数,但其中路径publicPath被配置为了"/",需要手动修改。

解决办法

1、将vue.config.js中的publicPath:"/“修改为publicPath:”./"
请添加图片描述
2、删除之前的dist重新打包。

结语

再次打包后打开dist中的index.html,发现页面出来了,但是如果页面有路由跳转的话,会发现跳转失败,
这时需要修改router中的路由模式为hash:
在router的index.js中修改:从vue-router中引入createWebHashHistory,将createWebHistory(process.env.BASE_URL)改为createWebHashHistory(process.env.BASE_URL)。
请添加图片描述
最后重新打包即可。


http://chatgpt.dhexx.cn/article/Dv5XUeb3.shtml

相关文章

vue打包的文件加上版本号

为什么要加版本号?因为有时候打包文件部署上线后发现线上没更新,原因是因为线上环境有缓存,故加上版本号可解决此问题! 在vue.config.js配置: 输出文件名js文件增加版本号: output: {filename: js/[name]…

解决vue打包后去掉console

方法一:使用插件 babel-plugin-transform-remove-console npm install babel-plugin-transform-remove-console --save-dev 安装插件生产环境:在项目的babel.config.js的plugin中添加节点。 let transformRemoveConsolePlugin [];if (process.env.N…

Vue打包路径配置

1. 配置文件 module.exports {// ......// 相对路径都是相对于index.js所在的目录config开始的build: {// index,assetsRoot两个路径基本不用改动,只是用于文件打包存放的路径// index.html的路径index: path.resolve(__dirname, ../dist/index.html),// js,css,f…

Vue打包并发布项目

一、 打包vue项目步骤: 1、对当前vue项目进行打包的命令如下: npm run build2、打包完成,会输出Build complete并且在vue项目中会生成一个名字为dist的打包文件。如下图: 二、 使用静态服务器工具包发布打包的vue项目 1、首先…

vue打包后static中的文件未打包进去

在vue中未使用到的静态资源文件,例如:引用在index.html的js的(此处不知为何,vue打包认为其为未引用),后端返回才引用到的图片等文件。 目前只涉及到此两类,后续再补充。 打包时static中的文件…

vue打包上线相关配置

1、打包: npm run build项目打包后,代码都是经过压缩加密的,如果运行时报错,错误信息无法得知是哪里报错 有了 map 文件就可以像未加密的代码一样,准确的输出哪一行那一列有错。 一般情况下时不需要保留的 在 vue.con…

vue打包nginx部署

描述:从未部署的vue项目,开始准备了tomcat和nginx,最后发现nginx比较方便,nginx部署的话只准备nginx就可以了。 nginx部署过程: 1、下载nginx的压缩包,直接解压到目的路径就可以。 2、将vue项目打包后的…

Vue打包时指定配置文件

vue工程的配置文件一般放在vue.config.js中,但是有时我们有自己的配置文件,需要在打包时动态切换,可在打包时动态指定node环境变量"process.env.NODE_ENV"切换。 1、新增不同环境的配置文件 2、export指定的配置文件 import devC…

vue 打包时图片压缩

1、image-webpack-loader 是依赖于 imagemin-pngquant,则必须要按顺序安装 npm install imagemin-pngquant --save-dev npm install image-webpack-loader --save-dev2、安装 compression-webpack-plugin 如果安装太高的版本,则会报错 可安装 下面的版…

VUE打包详细步骤

一、vue2 1.修改请求静态资源的路径 打开config文件夹下的index.js文件,修改assetsPublicPath的值,从"/“改为”./"。即从根路径改为相对路径。 assetsPublicPath:./2、修改本地图片的路径 打开build下的utils.js文件&#xff0c…

VUE打包目录自定义

新接手VUE项目,因为项目需要,我们要按照之前的项目结构打包,VUE自动生成的打包目录结构不符合要求。 1.dist目录不能用,导致每次打包需要将dist文件夹重新命名,如果要修改打包后文件的目录,需要修改“conf…

vue打包路径设置

vue 打包路径设置 vue打包默认路径css中图片路径等线上不显示工程源码 vue打包默认路径 1.vue打包之后的默认路径是从根目录开始算的,如果你的项目并不是根目录,而是子目录,这种设置就会导致路径错误, 解决方法:修改c…

Vue项目打包部署

前几天看[小猪课堂发布的nginx部署](https://zhuanlan.zhihu.com/p/431796992),跟着做了一遍,由于本人是第一次尝试,遇见了很多问题。经过查阅和搜索,终于解决掉了。下面给大家介绍一下我的流程和遇见的问题,我们可以多…

Vue中如何进行打包与部署?

Vue中如何进行打包与部署? Vue是一款流行的JavaScript框架,它提供了丰富的功能和组件,可以用于构建现代化的Web应用程序。在开发Vue应用程序时,我们通常需要进行打包和部署。本文将介绍Vue中的打包和部署,包括使用Web…

vue 打包的方式

我是一个苦b的程序员,今晚加班到快通宵了,困得快睁不开眼了,女上司很关心,问我要不要吃宵夜。我没好气地说,宵夜就算了,能让我睡一觉就行了。女上司红着脸说了句讨厌啊,然后坐在我身边不动&…

vue项目打包流程

vue项目打包流程 二、打包优化 1.首先在根目录下面创建一个vue.config.js文件 2.去除.map文件,在vue.config.js文件里面抛出一个对象,然后把下面两段代码写到对象里面,然后在控制台或者终端通过npm run build命令,打包项目 注…

mybatis嵌套循环map(高级用法)

前言: mybatis有默认的list,array,但是没有默认的map。所以不能直接写collection"map",如果这么写,它会当成是根据map.get(“map”)来取value值,大部分情况下是一个map中是不会有“map”这个key的…

mybatis中循环map集合操作

首先声明一个MAP集合,用来存放数据:如下图:声明map集合pd,将数据put到pd中,然后在声明一个map集合params,将pd几个放入params集合中,将params作为参数,参入xml配置文件中&#xff1a…

IDEA循环MAP的快捷键和自己常用的循环MAP方式

IDEA循环Map的快捷方式, IDEA 快捷键 map.keySet().iter 循环输出Map的key键 IDEA 快捷键 map.values().iter 循环输出Map的key的value值 // 循环map for (String s : map.keySet()) { // 输出map中key System.out.println(s); // 获取map中key的value map.get…

java for循环中map_Java用For循环Map

欢迎进入Java社区论坛,与200万技术人员互动交流 >>进入 根据JDK的新特性,用For循环Map,例如循环Map的Key java 代码 for(String dataKey : paraMap.keySet()) { System.out.println(dataKey ); } 这里要注意的是,paraMap是怎么样定义的,如果是简单的Map para …