定义 Vue.js 模板别名

Posted 2023-02-22

【中文标题】定义 Vue.js 模板别名

【英文标题】：Defining Vue.js template aliases

【发布时间】：2016-06-11 22:41:27

【问题描述】：

我有一个这样的前端项目：

resources/assets/js
resources/assets/jade
resources/assets/svg
resources/assets/sass

我最近发现可以在 webpack 中定义别名，以通过在 resolve.alias 映射中提供它们来防止不断使用像 ../../../.. 这样的相对路径。现在我在 javascript 中的导入更容易理解。但是，我尝试为我的 Jade 模板做类似的事情，定义如下：

<template lang="jade">
    include ../../../jade/pages/home

    .component-class
        +home-item
</template>

我不想写../../../jade/pages/home，而是写pages/home，但看不到任何记录在案的方式。这可能吗？这也是我想对sass-loader 做的事情。

【参考方案1】：

是的，你绝对可以做到这一点。我希望docs 对此更清楚，因为这对于大型哈巴狗应用程序非常重要。

将此添加到您的 app.js/server.js：

app.locals.basedir = path.join(__dirname, 'views');

然后您可以使用前导反斜杠字符引用所有模板文件，例如：

include /pages/administrator/home
include /mixins/widget