Nuxt运行npm run dev报错：routes/index.js无法导入@/helper/consts.js模块

报错修复步骤 #

• 先确认文件路径拼写、大小写是否正确，helper文件夹是否确实存在于@别名指向的目录下，避免手误拼写为helpers之类的错误
• 先用相对路径验证功能是否正常：如果routes和helper文件夹同属根目录，将导入代码修改为import {POPULAR} from "../helper/consts.js"，如果运行不再报错，说明是@别名配置问题
• 别名配置修正：在项目的nuxt.config配置文件中新增别名规则，指定@的指向路径：
  Nuxt2 配置示例（nuxt.config.js）：

  import path from 'path'
  export default {
    alias: {
      '@': path.resolve(__dirname, './') // 若项目有src目录则调整为 path.resolve(__dirname, './src')
    }
  }
  

  Nuxt3 配置示例（nuxt.config.ts）：

  import path from 'path'
  export default defineNuxtConfig({
    alias: {
      '@': path.resolve(__dirname, './')
    }
  })
  

  配置完成后重启开发服务即可生效。

i18n key导入操作方法 #

• 如果你使用的是官方@nuxtjs/i18n模块，首先确认已在nuxt.config中完成i18n的语言文件路径配置
• 直接导入语言包取值：如果你的语言文件存放在lang/zh-CN.js目录下，可直接导入语言文件读取key：

  import zhCN from "@/lang/zh-CN.js"
  const targetValue = zhCN['你需要的key']
  

• 运行时调用i18n实例翻译：在非组件的JS文件中可导入i18n实例调用t方法完成翻译：
  Nuxt2 示例：

  import i18n from '@/plugins/i18n.js'
  const translatedText = i18n.t('你的i18n.key')
  

  Nuxt3 示例：
  可直接在支持composable的环境中调用useI18n：

  const { t } = useI18n()
  const translatedText = t('你的i18n.key')
  

  若在非setup环境中使用，直接导入语言包常量即可。

内容的提问来源于stack exchange，提问作者TheBatman94