chinchang / web-maker

A blazing fast & offline frontend playground
https://webmaker.app
MIT License
2.59k stars 317 forks source link

Vue app: Wrong Mime-Type of *.vue-files #407

Open unoctanium opened 5 years ago

unoctanium commented 5 years ago

Meta info

In the files-version of web-maker (beta) I try to write a simple multi file vue app. Unfortunately that is not possible.

When importing my App.vue file from script.js, I get this error in the chrome dev console and my app doesn't work:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. App.vue:1

It seems to be a problem with the html server configuration for .vue-files.

Suggestion: *.vue-files should not be served as MIME Type "text/html" but "application/javascript"

Here my code:

Index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Vuetify app template</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css" />
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script type="module" src="script.js"></script>
  </body>
</html>

Script.js

import App from "./App.vue"

const app = new Vue({
  vuetify: new Vuetify(),
  data: {
    message: 'World'
  },
  render: h => h(App)
}).$mount('#app')

App.vue:

<template>
 <div id="app">
    <v-app>
      <v-content>
        <v-container>Hello {{test}}</v-container>
      </v-content>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "Vuetify App Template",
  data() {
    return {
      test: "Hello"
    }
  },
}
</script>
chinchang commented 5 years ago

I don't think even after setting the correct mime type the above code will work. That is because .vue files can't be directly understood by browsers. Something like vue-loader (for webpack) is required to convert .vue files to browser understandable code. And Web Maker files mode is a simple HTML/CSS/JavaScript environment without build processes like webpack.

If you want to use Vue, you'll have to run without .vue files. Check out the sample in templates.