vue/cli 中 /vue.config.js 的有效格式

Question

我需要@vue/cli 4.0.5 应用程序中的一些配置文件，我手动创建 /vue.config.js 带行：

export const settingsTestriorityLabels = [
  { key: 0, label: 'No00000' },
  { key: 1, label: 'Lowwwwwww' }
]

但尝试在我的组件中使用它时出现错误：

Module Error (from ./node_modules/eslint-loader/index.js):
error: 'settingsTestriorityLabels' is defined but never used (no-unused-vars) at src/views/Tasks/TasksSelection.vue:66:8:
  64 | <script>
  65 | import appMixin from '@/appMixin'
> 66 | import settingsTestriorityLabels from './../../../vue.config.js'
     |        ^
  67 | // vue.config.js
  68 | export default {

but in my component settingsTestriorityLabels declared and used, like :

<template>
  <div class="hello">

    <h1>{{ msg }}</h1>
    TasksSelection.vue +++++++
      settingsTestriorityLabels::{{ settingsTestriorityLabels }}

</template>

<script>
import appMixin from '@/appMixin'
import settingsTestriorityLabels from './../../../vue.config.js'
export default {

这个配置无效吗？

修改#2： 休息后我重新制作了我的组件并运行了

npm run serve
again but got error in my config file :
s$ npm run serve

> ctasks@0.1.0 serve /mnt/_work_sdb8/wwwroot/lar/VApps/ctasks
> vue-cli-service serve

 ERROR  Error loading vue.config.js:
 ERROR  SyntaxError: Unexpected token export
/mnt/_work_sdb8/wwwroot/lar/VApps/ctasks/vue.config.js:1
export const settingsTestriorityLabels = [
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:723:23)

我删除了 vue.config.js 中的导出密钥：

const settingsTestriorityLabels = [
  { key: 0, label: 'No00000' },
  { key: 1, label: 'Lowwwwwww' }
]

vue.config.js 的格式是否有效？

反正我也遇到了同样的错误：

./src/views/Tasks/TasksSelection.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: 'settingsTestriorityLabels' is defined but never used (no-unused-vars) at src/views/Tasks/TasksSelection.vue:66:10:
  64 | <script>
  65 | import appMixin from '@/appMixin'
> 66 | import { settingsTestriorityLabels } from './../../../vue.config.js'
     |          ^
  67 | // vue.config.js
  68 | export default {

我的组件内容：

<template>
  <div class="hello">

    <h1>{{ msg }}</h1>
      settingsTestriorityLabels::{{ settingsTestriorityLabels }}
        ...
</template>

<script>
import appMixin from '@/appMixin'
import { settingsTestriorityLabels } from './../../../vue.config.js'
export default {

  data: function () {
    return {
      count: 0,

      settingsTestriorityLabels: [],

我不明白为什么错误以及如何在导入和定义 settingsTestriorityLabels 时修复它？

修改#3： 我在网络示例中发现我试图用 contentL 填充我的 vue.config.js

module.exports = {
  settingsTaskPriorityLabels: [
    { key: 0, label: 'No' },
    { key: 1, label: 'Low' },
    { key: 2, label: 'Medium' },
    { key: 3, label: 'High' },
    { key: 4, label: 'Urgent' },
    { key: 5, label: 'Immediate' }
  ]
}

得到错误：

$ npm run serve

> ctasks@0.1.0 serve /mnt/_work_sdb8/wwwroot/lar/VApps/ctasks
> vue-cli-service serve

 ERROR  Invalid options in vue.config.js: "settingsTaskPriorityLabels" is not allowed

我尝试了更多示例，但都失败了......

修改#4： 我创建了 ./app.settings.js 的内容：

settingsTaskPriorityLabels = [
  { key: 0, label: 'No' },
  { key: 1, label: 'Low' },
  { key: 2, label: 'Medium' },
  { key: 3, label: 'High' },
  { key: 4, label: 'Urgent' },
  { key: 5, label: 'Immediate' }
]

settingsJsMomentDatetimeFormat = 'Do MMMM, YYYY h:mm A'

但出现错误：

 error  in ./app.settings.js

Module Error (from ./node_modules/eslint-loader/index.js):
error: 'settingsTaskPriorityLabels' is not defined (no-undef) at app.settings.js:1:1:
> 1 | settingsTaskPriorityLabels = [
    | ^
  2 |   { key: 0, label: 'No' },
  3 |   { key: 1, label: 'Low' },
  4 |   { key: 2, label: 'Medium' },


error: 'settingsJsMomentDatetimeFormat' is not defined (no-undef) at app.settings.js:10:1:
   8 | ]
   9 | 
> 10 | settingsJsMomentDatetimeFormat = 'Do MMMM, YYYY h:mm A'
     | ^
  11 | 

哪种语法有效？

Answer 1

尝试在 data(){} 中创建一个变量，然后将其设置为 settingsTestriorityLabels

您确定导入正确吗？我认为您应该将导入更改为

import { settingsTestriorityLabels } from ....

和

data() {
    return {
        ...
        testVar: settingsTestriorityLabels
    }
}

然后在模板中

{{testVar}}

但我不认为 vue.config.js 文件是您应该放置 settingsTestriorityLabels 设置的地方，您可以创建另一个文件来存储这些并导入它。 vue.config.js 文件用于在构建或测试时为 @vue/cli 添加一些配置。请看这里https://cli.vuejs.org/config/#global-cli-config