溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關怎么在Vue項目中配置pug解析支持，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
Vue 的用法沒有變化:
<template lang="pug">
transition(name="sider")
div.hello
h4 {{msg}}
p(:, :htmlData="msg") p label
button(@click="clickMe") clickTest
</template>要注意的一點是: 標簽后面如果有屬性(括號內的) 他和括號之間不要加空格,加了空格就會被當成字符串解析
vue-cli 2+ 配置:
下載包:
npm i -D pug pug-html-loader
在build/webpack.base.conf.js 的 module 中添加規則:
module: {
rules: [
{
test:/\.pug$/,
loader: "pug-html-loader"
},
// 省略其他規則
]
}好了啟動或重啟項目,即可開心的嘗試了
vue-cli 3 配置:
由于 cli 升級到3了,相關配置發生了很大的改變,所以要和2的更改不同:
下載包:
npm i -D pug pug-html-loader pug-plain-loader
和2比多了一個 pug-plain-loader
在 vue.config.js (如果沒有就在根目錄下新建一個) 添加代碼:
module.exports = {
chainWebpack: config => {
config.module.rule('pug')
.test(/\.pug$/)
.use('pug-html-loader')
.loader('pug-html-loader')
.end()
}
}看完上述內容，你們對怎么在Vue項目中配置pug解析支持有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
