当前位置:主页 > 技术 > vue > vue打包后dist的使用

vue打包后dist的使用

xi1年前 (2022-03-15)vue440

发现问题

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)。

最后重新打包即可。

转载请标注来源与原作者

本文链接:https://xiblogs.top/?id=26

“vue打包后dist的使用” 的相关文章

vue组件间传值

父传子利用props传值,子组件中规定props数据类型,然后父组件使用子组件时需要绑定数据在子组件上:父组件: <template> <div class="pa...

vue中按需引入Element-ui

vue中按需引入Element-ui

安装1、安装element-ui:npm i element-ui -S。2、安装babel-plugin-component:npm install babel-plugin-component -...

vue自定义组件的点击事件失效

vue自定义组件的点击事件失效

在vue开发过程中为了减少重复代码,很多时候都需要将重复的部分写成一个组件,方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写,事件则会失效:正确写法应该是这样:...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。