This article documents some minor issues with vue3+typescript+less development.

Continuous development, continuous update…

1. Require importing modules

Js file require(‘path’) load path module, esLint reported an error errorRequire Statement not part of import statement.

Corresponding to esLint rule: Poke here

The solution

.eslintrc.jsTo disable the no-var-requires rule

module.exports = {
	rules: {
	    '@typescript-eslint/no-var-requires': 'off',}}Copy the code

Vue3 Set the alias

Set the alias in vue.config.js

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set(The '@', resolve('src')).set('config', resolve('src/config')).set('utils', resolve('src/utils')).set('components', resolve('src/components')). The end () / / set the file extensions, set up after the introduction, can omit the extension config. Resolve. Extensions. Add ('ts')}}Copy the code

Cannot find module ‘config/element.config’ or its corresponding type declarations when introducing an alias module in main.ts

import { components, plugins } from 'config/element.config'
Copy the code

The solution

Added the Paths reference document to the tsconfig.jsonts configuration file: Module parsing – Path Mapping

{
	"paths": {
    		"@ / *": ["src/*"]."*": ["*"."src/*"]}}Copy the code