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: [
    '[email protected]@ant-design-vue',
    'ant-design-vue'
  ],

根據上面配置實例演示：