使用 Nuxt Site 作为模板

Question

我开始使用 nuxt 和 vue。我想使用 vue 创建一个简单的站点，然后使用 :

将其转换为静态站点

nuxt generate

我已经能够使用 nuxt 和 vuetify 做到这一点（你可以在 https://github.com/kc1/nuxt4 看到这个）。

有没有办法使用这个 nuxt 项目作为模板并使用文件执行 'find and replace' 以生成个性化网站？

举个例子。工具栏组件是：

<template>
  <v-toolbar color="indigo" dark>
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title class="white--text">Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat>Link One</v-btn>
      <v-btn flat>Link Two</v-btn>
      <v-btn flat>Link Three</v-btn>
    </v-toolbar-items>
  </v-toolbar>
</template>

有没有办法替换：

Title - > My project
Link One -> Home
Link Two -> About
Link Three -> Contact

是在将其生成为静态站点之前还是之后？

编辑：

在 nuxt 2.34 的 https://nuxtjs.org/guide/vuex-store 页面之后，在 /store/store.js 我放置了：

export const state = () => ({
'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ]

})

我仍然得到：

ERROR  [Vue warn]: data functions should return an object:                                                                                         20:59:31
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

found in

---> <Menu> at components/menu.vue
    <Default> at layouts/default.vue
        <Root>


ERROR  [Vue warn]: Error in render: "TypeError: Cannot use 'in' operator to search for 'toolbarActions' in undefined"                              20:59:31

found in

---> <Menu> at components/menu.vue
    <Default> at layouts/default.vue
        <Root>

我该如何解决这个问题？

编辑 2：

<template>
  <v-toolbar color="indigo" dark>
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title class="white--text">Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
       <v-btn flat v-for="action in toolbarActions" :key="action">{{action}}</v-btn>
             <!-- <v-btn flat v-for="action in toolbarActions">{{action}}</v-btn> -->
      <!-- <v-btn flat>Link One</v-btn>
      <v-btn flat>Link Two</v-btn>
      <v-btn flat>Link Three</v-btn> -->
    </v-toolbar-items>
  </v-toolbar>
</template>

// 从'~/store/store.js'导入toolbarActions

export default {
computed: {
toolbarActions() {
  return this.$store.getters.loadedPosts
.....

现在我看到了：

Answer 1

阅读有关 ENV 变量的信息。

此外，我建议您创建带有值的 js 文件，在其中添加导出并在 nuxt 组件中使用此文件变量。

另一种变体可能是使用 Vuex 商店。你可以在那里创建例如模块 mainMeny 并在那里定义链接、标题和 url 的数量。

Answer 2

使用 Vuex 来完成。

在存储中创建一个文件：/store/store.js

在那里。

const store = new Vuex.Store({
  state: {
    toolbarActions : [ 'My project', 'Home', 'About', 'Contact' ]
  }
})

在你的组件中

<template>
...
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat v-for="action in toolbarActions">{{action}}</v-btn>
    </v-toolbar-items>
...
</template>

export default {
  computed: {
    toolbarActions() {
      return this.$store.getters.loadedPosts
    }
  }
}

这将使您深入了解 Vuex 的工作原理。

已编辑

改用计算的属性。让我知道。

已编辑 2

new Vue({
 el: '#app',
  computed: {
    toolbarActions: function() {
      return [ 'My project', 'Home', 'About', 'Contact' ]
    }
  }

})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.15/vuetify.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.15/vuetify.css" />
     
     <div id="app">
     <v-toolbar color="indigo" dark>
        <v-toolbar-side-icon></v-toolbar-side-icon>
        <v-toolbar-title class="white--text">Title</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items class="hidden-sm-and-down">
           <v-btn flat v-for="action in toolbarActions" :key="action">{{action}}</v-btn>
                 <!-- <v-btn flat v-for="action in toolbarActions">{{action}}</v-btn> -->
          <!-- <v-btn flat>Link One</v-btn>
          <v-btn flat>Link Two</v-btn>
          <v-btn flat>Link Three</v-btn> -->
        </v-toolbar-items>
      </v-toolbar>
     </div>

P.D.: <v-toolbar-items class="hidden-sm-and-down"> 隐藏了小型设备中的按钮。

点击运行片段后，点击整页以查看它是否有效。

使用 Nuxt Site 作为模板

Using Nuxt Site as a template

javascript

vue.js

nuxt.js