webpack + pug 传递变量， 大神请解惑
发布于 6 年前 作者 50458012 2739 次浏览 来自 问答

如题， 本菜想改造下mpvue的脚手架， template模板想使用pug . css 使用 stylus。由于小程序限制包大小， 图片计划开发环境本地一份，生产环境 服务器一份。stylus已经根据环境变量定义上了图片地址变量   且使用正常。  问题是pug变量试了好久就是定义不上。求大神解惑！

webpack.pngvue.pngwechat.png 最后 编译完 变量是undefined， 求大神指点，不胜感激！

6 回复

src不能那样写，新版需要使用src=${aaa}/xxx/sss.jpg

@i5ting 如果不对的话 下片还有个P标签在打副手 它的内容为空

@50458012 p不是字符串拼接，所以还可以使用的

https://pugjs.org/api/migration-v2.html

各位看官 经过一番折腾 已成功解决， 如果你也面临同样问题请看下图QQ图片20180710105612.png 另外 楼上说的是有问题的 pug 就是任性到变量直接用 QQ图片20180710105747.png 然后 编译完成

QQ图片20180710105951.png 问题主要是出在了 是在vue 中使用了pug 所以 在mpvue-loader中添加了 pug项， 然后传递一个变量过去。主要是本人太菜没有深入理解问题所在

@i5ting 谢谢你对本菜的支持， 问题也解决， 楼下已上图 欢迎互相交流互相学习！ 另外 pug 中 src= ${aaa}/xxx/sss.jpg, 要加ES6的斜引号，#{变量} 是可以直接引用。 PUG也是可以变量直接引用 a.link(href=变量 + /aaa.html ) 不管这个变量是NODE后台传来 或者本地定义（有作用域），只有引用的地方能看到这个变量。二话不说，直接替换。所以对于前端来说PUG+STYLUS开发必备

回到顶部