【问题标题】:How to change vue-cli's delimiters?如何更改 vue-cli 的分隔符?
【发布时间】:2019-12-15 20:54:04
【问题描述】:

我安装了 vue-cli (webpack-simple)

src/main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  delimiters: ['?{', '}'],     // here , delimiters set " ?{ } " 
  el: '#app',
  render: h => h(App)
})

以上代码不工作(?{}),{} 继续工作

/src/App.vue代码修改

<template>
  <div id="app">
    ?{ msg }
  </div>
</template>

<script>
export default {
  name: "app",
  delimiters: ["?{", "}"], // here , delimiters set " ?{ } " 
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

index.html(不工作):

<div>  ?{ msg }  </div>

我想打印“欢迎使用您的 Vue.js 应用”

帮帮我

谢谢!!

【问题讨论】:

    标签: javascript vue.js vuejs2 vue-cli


    【解决方案1】:

    查看作者的回复:

    只有在完整构建 (vue.js) 使用运行时编译时才能更改分隔符。它不适用于 *.vue 文件(以保持所有 *.vue 文件语法一致)

    Vue 2.5.1 Component custom delimiter not working #5697


    [2020/07/03]

    如何配置使用运行时编译器来使用自定义分隔符

    1. 在你的项目根目录(你存储package.json的地方)创建一个vue.config.js文件

    2. 添加如下内容:

    // vue.config.js
    module.exports = {
      runtimeCompiler: true
    }
    
    1. 删除&lt;template /&gt;app.vue
    2. 修改&lt;script /&gt;app.vue如下:
    // app.vue
    <script>
    export default {
        delimiters: ['{', '}'],
        name: 'App',
        template: '<div id="app">{ title }</div>',
        data () {
            return {
                title: 'This is a Title'
            };
        }
    };
    </script>
    
    1. 文档Configuration Reference#runtimeCompiler

    【讨论】:

    • 如何在 vue-cli complie 中更改分隔符?
    • 那你能不能写个小例子
    猜你喜欢
    • 2021-11-18
    • 2021-08-20
    • 1970-01-01
    • 2019-03-08
    • 1970-01-01
    • 2011-04-13
    • 2019-12-21
    • 1970-01-01
    • 2020-11-25
    相关资源
    最近更新 更多