如何更改 vue-cli 的分隔符?

的分隔符

关注

发信

关注(28)粉丝(399)

如何更改 vue-cli 的分隔符?

本文介绍了如何更改 vue-cli 的分隔符?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

src/main.js:

从'vue'导入Vue从'./App.vue'导入应用程序新的 Vue({delimiters: ['?{', '}'],//这里，分隔符设置为?{ }"el: '#app',渲染:h =>h(应用程序)})

以上代码不起作用 (?{})，{} 继续工作

/src/App.vue 代码更改

<div id="应用程序">?{消息}

<脚本>导出默认{名称:应用程序"，delimiters: ["?{", "}"],//这里，分隔符设置为?{ }"数据() {返回 {msg: "欢迎使用你的 Vue.js 应用程序"};}};

index.html(不起作用):

?{味精}</div>

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

帮帮我

谢谢！！

解决方案

查看作者回复:

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

Vue 2.5.1 组件自定义分隔符不起作用 #5697

[2020/07/03]

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

在你的项目根目录(你存储 package.json 的地方)创建一个 vue.config.js 文件
添加内容如下:

//vue.config.js模块.出口 = {运行时编译器:true}

在app.vue

修改app.vue中的
1. 文档配置参考#runtimeCompiler
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 code changing
```
<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 (not working):
```
<div>  ?{ msg }  </div>
```
I want to print 'Welcome to Your Vue.js App"
help me
Thank You!!
解决方案
See the response from the Author:
Vue 2.5.1 Component custom delimiter not working #5697
[2020/07/03]
How to config to use runtime compiler to use custom delimiters
1. Create a vue.config.js file at your project root(the place you store package.json)
2. Add the content as follow:
```
// vue.config.js
module.exports = {
  runtimeCompiler: true
}
```
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. The document Configuration Reference#runtimeCompiler
这篇关于如何更改 vue-cli 的分隔符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-05 12:43