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'],

根據上面配置實例演示：

總結

以上是生活随笔為你收集整理的vue使用@路径引入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。