Vue.js: Fehler erzeugen Funktion machen

Question

Ich versuche, ein einfaches Vue.js zu laufen, aber ich folgende Fehlermeldung ständig angezeigt:

[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

main.js:3180 [Vue warn]: Failed to generate render function: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'". in

with(this){return _c('div',{attrs:{"id":"app"}})}

(found in)

Doch, kann ich nicht verstehen, was diesen Fehler verursacht. Ich scheine keine dynamischen Vorlagen zu verwenden und alles sollte vorkompiliert werden. Hier ist der Code meiner Anwendung:

import Vue from 'vue' 
import VueRouter from 'vue-router' 

const Home = Vue.component('home-component', { 
    render() { 
    return <div> 
     <router-link to="/users">Users</router-link> 
     <router-link to="/about">About</router-link> 
    </div> 
    } 
}) 

const Users = Vue.component('users-component', { 
    render() { 
    return <p>Users</p> 
    } 
}) 

const NotFound = Vue.component('not-found-component', { 
    render() { 
    return <p>Not Found</p> 
    } 
}) 

const routes = [ 
    { path: '/', component: Home }, 
    { path: '/users', component: Users } 
] 

const router = new VueRouter({ 
    routes 
}) 

const app = new Vue({ 
    router 
}).$mount('#app') 

Und hier ist, wie ich JavaScript-Dateien in meinem gulpfile verarbeiten:

const paths = { 
    main: 'web/javascript/src/main.js', 
    allJs: 'web/javascript/**/*.{js,vue}', 
    resultJs: 'public/assets/javascript/main.js', 
}; 

gulp.task('scripts', function() { 

    return browserify(paths.main) 
    .transform(babelify, { presets: ['es2015'], plugins: ["transform-runtime"] }) 
    .transform(vueify) 
    .bundle() 
    .pipe(fs.createWriteStream(paths.resultJs)) 
} 

Es gibt scheinen viele ähnliche Fragen auf Stackoverflow zu sein, aber keiner von ihnen geholfen mich.

Answer 1

Der Browser wirft einen CSP-Fehler (Content Security Policy). Um dieses Problem zu umgehen, sollten Sie in Erwägung ziehen, zu dem reinen Laufzeit-Build zu wechseln, das vollständig CSP-kompatibel ist. https://vuejs.org/v2/guide/installation.html#CSP-environments

Außerdem haben Sie return falsch geschrieben. Es sollte jsx in einem Paar von Paranthesis () zurückgeben. Der folgende Code sollte helfen

import Vue from 'vue' 
import VueRouter from 'vue-router' 

const Home = Vue.component('home-component', { 
    render(h) { 
    return(
    <div> 
     <router-link to="/users">Users</router-link> 
     <router-link to="/about">About</router-link> 
    </div> 
    ) 
    } 
}) 

const Users = Vue.component('users-component', { 
    render(h) { 
    return(
     <p>Users</p> 
    ) 
    } 
}) 

const NotFound = Vue.component('not-found-component', { 
    render(h) { 
    return(
     <p>Not Found</p> 
    ) 
    } 
}) 

const routes = [ 
    { path: '/', component: Home }, 
    { path: '/users', component: Users } 
] 

const router = new VueRouter({ 
    routes 
}) 

const app = new Vue({ 
    router 
}).$mount('#app')