控制台总提示开发版 Vue.js

问题

控制台有提示：
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

解决

<script>标签中输入代码
1
Vue.config.productionTip = false

注册的组件未使用，页面总是报错

问题

组件中注册了需要引入的组件，但是引入的组件在页面中还没有使用，因此总是报错

解决

修改项目的 package.json

eslintConfig 配置项

rules 配置项

"eslintConfig": {
  "rules": {
    "vue/no-unused-components": "off" //修改规则
  }
}

修改 eslintrc.js 文件

如果有 eslintrc.js 文件

修改 rules 配置项

rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  "vue/no-unused-components": "off" //修改规则
}

修改 vue.config.js 文件

根目录下创建 vue.config.js

1
2
3

module.exports = {
  lintOnSave:false, // 关闭 eslint 所有语法检查
}

总结

eslintrc.js 文件优先级高于 package.json 配置项

报错组件名称应该始终是多单词

问题

项目默认引入了 eslint 代码检查。组件名称没有按照规范命名。“组件名应该始终是多单词，不应该以单个单词命名组件” “Component name “xxx“ should always be multi-word vue/multi-word-component-names”

解决1

关闭 eslint 所有规则

组件名称以驼峰式命名
组件名称以连接线方式命名

修改配置，禁用eslint的多单词命名规则

打开 vue.config.js

添加规则：lintOnSave:false

const { defineConfig } = require("@vue/cli-service")
module.exports = defineConfig({
  transpileDependencies:true,
  lintOnSave:false
})

Vue问题

控制台总提示开发版 Vue.js

注册的组件未使用，页面总是报错

报错组件名称应该始终是多单词