Vue + webpack 项目 import 路径 和 路径别名

  import 路径

        在 Vue 项目中，我们常遇到以下历经引用的方式：

import './plugins/element.js'

import '../router';

import '@/scss/common/var';

import 'common/flexible.js'

        1、./  表示当前目录下
        2、../ 表示父级目录下
        3、@/ 是 webpack 设置的路径别名，代表什么路径，如果是用 vue-cli2 脚手架创建的项目要看 webpack 的 build 文件夹下webpack.base.conf.js 里面对于 @ 是如何配置，如果是用 vue-cli3 创建的项目则可以在 vue.config.js 文件中查看。

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
}

        上述例子 @/ 代表着到 src 这个文件夹的路径。

        4、如果没有前导 "/"，"./" ，"../" 或 "@/ " 指示文件，则表示路径为： node_modules 文件夹。Vue 项目使用 npm 安装插件，安装后插件放置在项目的 node_modules 文件夹下，所以引入插件时，以 vue-quill-editor 插件为例，应该这样写：

import VueQuillEditor from 'vue-quill-editor'

Vue 路径别名

        我们在写 vue 的时候需要引入许多的组件或者 css 样式。 当我们的文件越来越多，层级也越来越多的时候引入就比较麻烦，要写很多的“…/…/”，例如：“ import '../../../plugins/element.js' ”，为了书写方便， 我们可以给vue路径设置别名，来节省代码的输入次数，提高开发效率。

        在项目根路径新建 vue.config.js 文件（如果不存在该文件则创建），然后在文件里面输入下面的代码：

const path = require('path');        // 引入path模块
function resolve(dir){    // 声明一个函数,调用函数的时候传入相对路径
  return path.join(__dirname,dir)    // path.join(__dirname)设置绝对路径
}
module.exports = defineConfig({
  chainWebpack:(config)=>{
    config.resolve.alias
      // .set('路径别名', resolve('vue.config文件的相对路径'))
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('common', resolve('src/common'))
      .set('network', resolve('src/network'))
  }
})

        修改 vue.config.js 之后，需要重新运行项目方可生效。最后如果想要加载 src 文件件下的 assets 中的 logo 图片，可以直接这样 import：

import logo from 'assets/logo.png'