Gulp Vue.js:无法生成渲染函数

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

[Vue warn]：您似乎正在使用中的Vue.js独立版本 具有禁止使用的内容安全策略的环境 不安全评估。模板编译器无法在此环境中工作。 考虑放宽策略以允许不安全的EVE或预编译 将模板转换为渲染函数

main.js:3180[Vue warn]：无法生成渲染函数： EvalError:拒绝将字符串作为JavaScript求值，因为 “不安全评估”不是以下脚本中允许的脚本源 内容安全策略指令：“默认src‘self’”。在

使用（this）{return_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')

---

StAdvoad中似乎有很多类似的问题，但没有一个帮助我。

< P>浏览器正在抛出内容安全策略（CSP）错误，为了解决这个问题，您应该考虑切换到只运行于CSP的运行时构建。

此外，您的

return

写得不正确。它应该成对返回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')

从“Vue”导入Vue
从“vue路由器”导入VueRouter
常量Home=Vue.component（'Home-component'{
渲染（h）{
返回(
使用者
关于
)
}
})
const Users=Vue.component（'Users-component'{
渲染（h）{
返回(
使用者

)
}
})
const NotFound=Vue.component（'not-found-component'{
渲染（h）{
返回(
找不到

)
}
})
常数路由=[
{path:'/'，组件：Home}，
{路径：'/users'，组件：users}
]
常量路由器=新的VueRouter({
路线
})
const app=新的Vue({
路由器
}).$mount（“#应用程序”）

正如您所建议的，我添加了括号，但没有用。我仍然看到同样的错误。

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