今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家
打包之后打开dist的页面显示空白:
这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况
1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的。
build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true, devtool: '#source-map', productionGzip: false, productionGzipExtensions: ['js', 'css'], bundleAnalyzerReport: process.env.npm_config_report }
这里需要将 assetsPublicPath: '/'改为assetsPublicPath: './',
2.src里边router/index.js路由配置里边默认模式是mode:'hash'(页面会在路由上加#),有时候改成了history(纯净路由)模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。
export default new Router({ //mode: 'history', mode:'hash',\\或者直接不写 routes: [{}] )}
3.也有可能是因为背景图片路径没有配置需要在build/utils.js添加配置publicPath: '../../'
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:'../../', fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) }
打包后找不到响应路径:
这都是比较常见的几种解决方式,如果将静态资源的图片路径作为绑定数据以js引入,图片放入了static里面用来引入这个页面又该怎样处理呢,如果以绝对路径访问vue打包是不会处理这一类的,所以打包后它图片访问的路径不会更改,而打包后dist文件里就只有index.html和webpack不会处理的static文件夹(vue static/下的文件都不会被Webpack处理:它们使用相同的文件名,直接拷贝到最终的路径)
解决方式有两种,
1.如果要上线的话,需要将你的主域名加在static之前然后他会逐级去访问打包后的文件。
return { isShow:true, imgData:'', myUpPic:'/yourDN/static/img/logo.png' }
2.由于vue将组件访问静态资源的路径配置好了,你可以直接/static来找到static下的文件,但是这里的问题就是你访问的时候它是逐级访问这些文件的,所以打包后他还是会找不到静态资源的文件,在这里你就需要将/static改成./static,这样的话他就会在打包后的文件夹下直接访问其之下的静态资源文件夹。
return { isShow:true, imgData:'', //myUpPic:'/static/img/logo.png' myUpPic:'./static/img/logo.png' }
以上就是个人处理vue打包bug的一些小经验,希望这些能够对大家有所帮助。
补充知识:vue打包后路径多了个/css/static
vue打包后路径多了个/css/static导致一些css属性效果不显示。
解决方法:
在build/utils.js文件中添加publicPath:'…/…/',重新打包即可。
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: "vue-style-loader", publicPath: "../../" }); } else { return ["vue-style-loader"].concat(loaders); }
以上这篇vue打包静态资源后显示空白及static文件路径报错的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?