Vue.js：生成渲染函数失败

Question

我尝试运行一个简单的Vue.js，但我经常收到以下错误：

[Vue警告]：您似乎在内容安全策略禁止不安全评估的环境中使用Vue.js的独立构建。模板编译器无法在此环境中工作。考虑放宽策略以允许不安全评估或将模板预编译为呈现函数。

主要的js:3180[Vue warn]：未能生成呈现函数：EvalError:拒绝将字符串计算为JavaScript，因为“不安全的eval”不是以下内容安全策略指令中允许的脚本源：“默认src‘self’”。在里面

使用（this）{返回_c（'div'，{attrs：{"id"："app"}}）}

(发现于)

然而，我不明白是什么导致了这个错误。我似乎不使用任何动态模板，一切都应该预先编译。下面是我的应用程序的代码:

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')

下面是我如何在gulpfile中处理JavaScript文件:

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))
}

在StackOverflow上似乎有很多类似的问题，但没有一个对我有帮助。

Answer 1

浏览器正在引发内容安全策略 （CSP） 错误，若要解决此问题，应考虑切换到完全符合 CSP 的纯运行时生成。https://v2.vuejs.org/v2/guide/installation.html#CSP-environments

另外，您返回的书写不正确。它应该以对的副词 （） 返回 jsx。下面的代码应该会有所帮助

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')