vue使用@路径引入

清疚 2023-02-15 07:59 27阅读 0赞

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

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

首先，先确定项目中是否有`path`模块：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]  
如果没有path模块需要先安装path

npm  install  path  --save

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

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

根据上面配置实例演示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604201611722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200604202352254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200604202626635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70