Vue template not work while using es6 import vue

Question

Below is my reproduce step:

npm install [email protected]
write below code in my main.js file

import Vue from 'vue' new Vue({ el: '#app', data: { msg: 'hello,word' } })
use webpack build it, then it will build a file in dist folder
then I write index.html file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <div><span id="app">{{ msg }}</span></div>
  </div>
  <script src="./dist/main.js"></script>
</body>
</html>

then I open the index.html file in chrome, but it not display 'hello, word', I am a new beginner vue, I can not figure out what it wrong. thanks in advance.

And I alse found that vue delete my dom like above img.

Does this answer your question? "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 — evolutionxbox
– evolutionxbox, Commented Jan 28, 2022 at 10:21
The main.js you are typing your code in to and the one linked in your index file are two different files. Is that the issue? — Esszed
– Esszed, Commented Jan 28, 2022 at 10:26
Good point, please make sure that you are running the vue project, most likely using npm start? — evolutionxbox
– evolutionxbox, Commented Jan 28, 2022 at 10:27
thnaks @Esszed I am not think that are two different files. one because the main.js in dist folder is the webpack build one. and the other reason is when I open index.html in chrom, it display nothing even if this text '{{ msg }}' — Courage
– Courage, Commented Jan 28, 2022 at 10:36

tony19 · Accepted Answer · 2022-07-16 02:19:54Z

1

At first, I thought it was because you weren't running the project properly but then I realized that the comment you've pointed to with the red arrow shows that the Webpack server is in fact running.

The problem you're having here it seems, is that you're using the runtime-only build of Vue when you need the runtime + compiler build to compile Vue components that have template blocks or swap the template blocks for render functions.

If you don't use the version with the compiler but your components have template blocks, then they won't compile properly (although normally an error is shown to advise of this).

For instructions on using the full build rather than the runtime-only version, see here.

edited Jul 16, 2022 at 2:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 28, 2022 at 11:44

CodeTheorist

1,69215 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Courage Over a year ago

That's really awesome!!! I really appreciate! thank you so much @Alex Scott

Collectives™ on Stack Overflow

Vue template not work while using es6 import vue

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related