Vue cli别名配置

Vue cli别名配置

• 新建一个vue.config.js文件，这个文件的作用有：配置别名、配置一些插件像scss-resources-loader:一个可以创建多个文件，文件内部的内容都会作为全局变量,在其他创建的文件中不用引入可以直接访问、以及其他插件。
• 配置内容

const path = require('path'); 
const fs = require('fs');

function resolve(dir) { // 拿到文件的函数
  return path.join(__dirname, dir);// 将当前文件和dir参数的路径自动合并成为正确的路径
}

module.exports = { // 主体
  configureWebpack: { 
    resolve: {
      alias: { // 别名配置
        'views': '@/views', // 这里是views文件夹的路径 src/views
        'components': '@/components' // 这里是components文件夹的路径 src/components
      }
    }
  },
  chainWebpack: config => {  // 这里的config拿到的是configureWebpack
    config.resolve.alias // 这个自然就是别名配置了
      // src内部路径
      .set('@$', resolve('src')) // 设置@表示src文件夹

      // components内部路径
      .set('components', resolve('src/components')) // 设置components表示src/components

      // views路径
      .set('views', resolve('src/views')); // 设置views表示src/views
  }
}

• 可能有时候配置是正确的但是仍然无法正确访问路径，最好办法建议这时候可以使用@/...来访问你的文件，@/xxx访问路径目前没有出过问题。

good study and everyday up.——coderNoob