vue使用@路径引入

vue使用@路径引入，这个在项目中很常见；

项目中使用引入文件有时候路径比较深，需要使用"../../../xx.js"这种类似的路劲引入，这种方式比较笨，可以使用webpack的别名alias配置来解决。

首先，先确定项目中是否有path模块：

如果没有path模块需要先安装path

npm  install  path  --save

（1）vue-cli1，vue-cli2搭建的项目
以下为vue.config.js配置

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
 
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("base", resolve("baseConfig"))
      .set("public", resolve("public"));
  },
}

（2）webpack3,4的写法

这个@是在 webpack.base.conf.js 文件里配置的，找到下面这段话

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

（3）vue-cli3搭建的项目
以下为vue.config.js配置

  publicPath: '/asset/baigei2020/alipay_act',
  outputDir: '../../../public/asset/baigei2020/alipay_act',
  assetsDir: 'static',
  productionSourceMap: false,
  devServer: {
    port: 3002,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://mayouchen.test.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
        cookieDomainRewrite: {
          '*': 'localhost'
        }
      }
    }
    //after: require('./mock/mock-server.js')
  },
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        '@': resolve('src'),
        '~': process.cwd(),
        public: resolve('public'),
        components: resolve('src/components'),
        util: resolve('src/utils'),
        store: resolve('src/store'),
        router: resolve('src/router')
      }
    }
  },
  transpileDependencies: [
    '_ant-design-vue@1.3.10@ant-design-vue',
    'ant-design-vue'
  ],

根据上面配置实例演示：