Rumah > hujung hadapan web > tutorial js > vue路径优化之resolve详解

vue路径优化之resolve详解

小云云
Lepaskan: 2018-01-29 10:32:10
asal
4343 orang telah melayarinya

通过vue-cli来创建vue+webpack的项目时,已经有很多都配置好了,但是路径方面为了方便开发,还可以优化。本文主要介绍vue路径优化之resolve,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

1. resolve.extensions

在webpack.base.conf.js中,我们可以看到resolve配置,其中的extengsions是一个数组,如下所示:


extensions: ['.js', '.vue', '.json'],
Salin selepas log masuk

通过这样的配置,我们在组件中过着路由中应用组件时,就可以更为方便的应用,比如:


import Hello from '@components/Hello';
Salin selepas log masuk
Salin selepas log masuk

即Hello.vue这个组件我们不需要添加.vue后缀就可以引用到了,如果不用extensions, 我们就必须要用@components/Hello.vue来引入这个文件。

2. resolve.alias

在组件之间相互引用时,可能是下面这样的:


import Hello from '../src.components/Hello';
Salin selepas log masuk

其中的路径是相对于当前页面的。 但是如果嵌套等更为复杂,那么写起来会比较麻烦。但是如果我们通过这样的配置:


 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@pages': path.join(__dirname, "..", "src", "pages"),
   "@components": path.join(__dirname, "..", "src", "components"),
   // 注意: 静态资源通过src,不能这么设置。
   // "@assets": path.join(__dirname, "..", "src", "assets"),
  }
Salin selepas log masuk

其中vue$表示引入vue,就可以像下面这么写:


import Vue from 'vue'
Salin selepas log masuk

另外,对于@pages和@components我们就可以直接引用了,而省去了一大堆的复杂应用,另外通过@可以消除歧义。如下所示:


import Hello from '@components/Hello';
Salin selepas log masuk
Salin selepas log masuk


import App from '@pages/App'
Salin selepas log masuk

值得注意的时: 在webpack.config.js中我们不能使用../ 以及./这种形式的路径方式,而是通过 path.join 和 __dirname 这种形式来表示路径,否则会报错。

另外: 在组件中,我们会引用一些静态文件,即static下的文件, 这时我们就不能用 alias 下的配置了,而必须使用一般的配置方式。

相关推荐:

MySql使用skip-name-resolve解决外网连接客户端过慢如何解决

Atas ialah kandungan terperinci vue路径优化之resolve详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan