Vue的高级配置 - 设置别名

vue项目开发时一般用相对路径，但是如果文件位置发生变动，需要重新设置路径，为了解决这个问题，直接通过修改vue-cli的webpack配置，进行别名的设置

参考官方文档

• vue-cli官方文档webpack相关
  • 地址
• image.png

实现方案

• 新建vue.config.js文件

// vue.config.js
const path = require('path')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
      return {
        resolve: {
          alias: {
            '@js': path.resolve(__dirname, './src/assets/js'),
            '@css': path.resolve(__dirname, './src/assets/css'),
            '@img': path.resolve(__dirname, './src/assets/imgs'),
            '@c': path.resolve(__dirname, './src/components'),
          }
        }
      }
    }
  }
}

• 用别名替换相对路径

// old
import './assets/js/htmlFontSize';
// new
import '@js/htmlFontSize.js';