如何更改vue-cli的分隔符? [英] How to change vue-cli's delimiters?

问题描述

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

I installed 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)
})

以上代码无效(?{} )， {} 正常

Above code is not working (?{}), {} keeps working

/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应用"

I want to print 'Welcome to Your Vue.js App"

救救我

谢谢！

推荐答案

请参阅作者的回复:

仅当在完整版本(vue.js)中使用运行时编译时，才能更改定界符.在* .vue文件中不起作用(保持所有* .vue文件语法一致)

Delimiters can only be changed when using runtime compilation with the full build (vue.js). It does not work in *.vue files (to keep all *.vue files syntax consistent)

Vue 2.5.1组件自定义分隔符无法使用#5697

[2020/07/03]

[2020/07/03]

如何配置为使用运行时编译器使用自定义定界符

How to config to use runtime compiler to use custom delimiters

1. 在项目根目录(存储 package.json 的位置)中创建 vue.config.js 文件

添加以下内容:

// vue.config.js
module.exports = {
  runtimeCompiler: true
}

1. 在 app.vue
上删除<模板/>
2. 在 app.vue 上修改< script/> ，如下所示:

1. Delete <template /> at app.vue
2. Modify the <script /> at app.vue as follow:

// app.vue
<script>
export default {
    delimiters: ['{', '}'],
    name: 'App',
    template: '<div id="app">{ title }</div>',
    data () {
        return {
            title: 'This is a Title'
        };
    }
};
</script>

1. 文档配置参考#runtimeCompiler

这篇关于如何更改vue-cli的分隔符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！