Блог

Я пытаюсь установить пользовательские разделители в Vue.js 3 но, похоже, это не работает.

Первое, что я попробовал, это установить параметр компонента delimiters следующим образом:

 export default defineComponent({
    delimiters: ["${", "}$"],
    // ...
})
  

но ничего не происходит.

Затем я попытался настроить файл main.ts следующим образом:

 import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

App.delimiters = ["${", "}$"];

createApp(App)
   .use(router)
   .mount("#app");
  

Опять интерполяция строк в шаблоне не работает.

Чего мне не хватает?

Должно быть внутри createApp

Пример:

 var app = Vue.createApp({
  data() {return {message: 'Ciao'}},
  // for global
  delimiters: ["${", "}$"],
  // for standalone
  compilerOptions: {
    delimiters: ["${", "}$"]
  }
}).mount('#app');  

 <script src="https://unpkg.com/vue@3.0.1/dist/vue.global.prod.js"></script>
<div id="app"><h1>Message: ${message}$</h1></div>  

Если вы посмотрите на консоль в инструментах разработчика вашего браузера, вы можете увидеть что-то вроде:

«»» vue.runtime.esm-browser.js:1486 [Предупреждение Vue]: компонент предоставил параметр шаблона, но компиляция во время выполнения не поддерживается в этой сборке Vue. Использовать «vue.esm-browser.js » вместо этого. в «»»

 import { createApp } from "vue";
  

указывает на ‘vue / dist / vue.runtime.esm-browser’, который не поддерживает параметр «разделители», поскольку он требует компиляции, недоступной в этой сборке.

Теперь замените строку импорта на

 import { createApp } from "vue/dist/vue.esm-browser";
  

или

 import { createApp } from "vue/dist/vue.esm-bundler";
  

Он должен работать просто отлично.