vue-cli のカスタム パス エイリアス アセットと静的フォルダーの違い

前に書かれています:

これは、vue-cli のいくつかの小さな知識ポイントの簡単な紹介であり、vue-cli のスキャフォールディングを初めて使用する学生や、それについてあまり知らない学生に適しています。それを避けてください。困っている友達は参考にしていただければいいねやフォローしていただけると幸いです。

静的リソースの処理:

アセットと静的フォルダーの違い

vue-cli には静的リソースを配置する場所が 2 つあることは多くの人が知っていると思います。それは、src/assets フォルダーと です。 >static フォルダーですが、この 2 つの違いがよくわからない人も多いかもしれません。 src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。

assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在 <img src="/static/imghw/default1.png" data-src="./logo.png" class="lazy" alt="vue-cli のカスタム パス エイリアス アセットと静的フォルダーの違い" >
和 background: url(./logo.png)中，”./logo.png” 是相对的资源路径，将由Webpack解析为模块依赖。

static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]。

在我们实际的开发中，总的来说：static放不会变动的文件 assets放可能会变动的文件。

在js数据中如何引用图片

因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。

js部分：
    data () {
        return {
             imgUrl: '图片地址',//错误写法 
            imgUrl: require('图片地址')//正确的写法
        }
}
template部分：
img标签形式：
<img  src="/static/imghw/default1.png"  data-src="img"  class="lazy"  : / alt="vue-cli のカスタム パス エイリアス アセットと静的フォルダーの違い" >
或者p背景图形式：
<p :style="{backgroundImage: &#39;url(&#39; + img + &#39;)&#39;}"></p>

说了图片就正好再提一下vue-cli的一个图片有关的配置，下图这个配置的意思是：在10000b 的图片以下进行base64转换，所以如果项目中有些比较小的icon就不用再进行图片精灵的处理了

webpack+vue自定义路径别名

vue-cli 用的是webpack，也可以使用webpack自定义别名这个功能，自定义别名这个功能当你在多层文件夹嵌套的时候不必一层一层找路径，直接使用自定义别名就可以找到文件的位置。

设置方法：

**设置地址：**build文件夹下面的webpack.base.conf.js文件
具体设置：

resolve: {
    extensions: ['.js', '.vue', '.json'],
     alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'static':path.resolve(__dirname, '../static'),//增加这一行代码
        }
    },

使用方式：

使用的时候要像下方截图的B处一样前面要加上一个’~’，这里的webstorm虽然提示报错，我们可以不用管，代码运行是正常的。

解读：

这里给’static’赋予了一个地址，那么在程序中引入路径的时候’~static’就直接可以代替路径’../static’，亲测，这里就算多层嵌套也可以成功找到路径。

清理项目中没用的插件

很多人像我一样，刚开始的会安装很多插件，然后最后在项目中并没有用到。那之前安装的插件太多了，连自己都忘记了安装了哪些插件？

package.json

在上图所示位置，我们项目安装的所有的模块依赖都在这个pageage.json文件中，当我们需要整理一波自己的依赖的时候，可以在这个文件里面找有没有现在已经没用的依赖，可以使用命令行npm remove 模块名字来删除没用的模块。

–save-dev和–save的区别

上面的这些依赖有些只在开发环境里面使用的模块，有的在项目上线之后还是要继续依赖的模块。他们之间的区别就在于我们平时安装模块依赖时的：--save-dev和 --save

当你使用--save-dev安装依赖的时候就会放在package.json的devDependencies对象下面，相反的，当你使用--save

アセット ディレクトリ内のファイルは webpack によって処理され、 モジュールの依存関係に解析されます。相対パス形式のみがサポートされます。たとえば、<img src="/static/imghw/default1.png" data-src="./logo.png" class="lazy" alt="vue-cli のカスタム パス エイリアス アセットと静的フォルダーの違い" >

と background: url(./logo.png) では、「./logo. png" は、モジュールの依存関係として Webpack によって解析される相対リソース パスです。 static/ ディレクトリ内のファイルは Webpack では処理されません。最終的なパッケージ化ディレクトリ (デフォルトは dist/static) に直接コピーされます。 これらのファイルは、config.js ファイル内の build.assetsPublicPath および build.assetsSubDirectory 接続によって決定される絶対パスを使用して参照する必要があります。

static/ に配置されたファイルは、絶対パス /static/[ファイル名] として参照する必要があります。

実際の開発では、 一般に次のようになります:静的は変更されないファイルを保存し、アセットは変更される可能性のあるファイルを保存します。

js データで画像を参照する方法

webpack は画像をモジュールとして参照するため、画像を参照するには、文字列の形式で直接ではなく、js で require を使用する必要があります。

rrreee

画像について話した後、vue-cli の画像関連の設定について触れたいと思います。以下の画像の設定は、プロジェクト内に比較的小さなアイコンがいくつかある場合に、10000b の画像の下で Base64 変換を実行することを意味します。 、する必要はありません 画像スプライトは処理されます

webpack+vueカスタムパスエイリアス

vue-cliはwebpackを使用します、webpackカスタムエイリアス関数、カスタムエイリアス関数も使用できますマルチの場合-layer フォルダー ネストする場合、レイヤーごとにパスを探す必要はありません。カスタム エイリアスを使用してファイルの場所を直接見つけることができます。

🎜設定方法: 🎜🎜**設定アドレス: **ビルドフォルダー配下のwebpack.base.conf.jsファイル🎜具体的な設定: 🎜rrreee🎜使い方:🎜🎜これを使用する場合、以下のスクリーンショットの B のように、その前に「~」を追加する必要がありますが、ここでの Webstorm はエラーを促しますが、無視してコードは正常に実行されます。 🎜🎜解釈:🎜🎜 ここで 'static' にアドレスが指定されているため、プログラムにパスが導入されるときに '~static' でパス '../static' を直接置き換えることができます。 , ここでは、複数のレベルのネストがあっても、パスは正常に検索されます。 🎜🎜🎜🎜清掃プロジェクト 役に立たないプラグイン🎜🎜 私と同じように、多くの人は最初にたくさんのプラグインをインストールしますが、結局プロジェクトでそれらを使用しなくなるでしょう。これまでに非常に多くのプラグインがインストールされているのに、どのプラグインをインストールしたか忘れてしまったということはありませんか? 🎜🎜package.json🎜🎜🎜🎜上の図に示されている場所では、プロジェクトによってインストールされたすべてのモジュールの依存関係がこの pageage.json ファイルにあります。独自の依存関係を整理する必要がある場合は、このファイルを調べて、該当する依存関係があるかどうかを確認できます。役に立たなくなった場合は、コマンド ライン npm delete module name を使用して不要なモジュールを削除できます。 🎜🎜 –save-dev と –save の違い🎜🎜 上記の依存関係の一部は開発環境でのみ使用されるモジュールであり、一部はプロジェクトがオンラインになった後も引き続き依存するモジュールです。それらの違いは、通常、モジュールの依存関係をインストールするとき: --save-dev と --save です🎜🎜 --save- を使用するときは dev は依存関係をインストールし、package.json の devDependency オブジェクトの下に配置されます。逆に、--save を使用して依存関係をインストールすると、依存関係オブジェクトの下に表示されます。 🎜🎜概要: 🎜* –save-dev は開発時に依存するもので、 –save は公開後も依存するものです。 *🎜🎜🎜vue-cli 設定については以前に 2 つの記事を書きました。必要な学生は参照してください: 🎜🎜vue-cli スキャフォールディングの使用方法を説明します🎜🎜vue-cli スキャフォールディングでの jQuery、ブートストラップ、および使用のリファレンスcss とless🎜🎜あとがき🎜🎜 上記は、私自身の実践プロジェクトの小さな蓄積なので、フォローアップにいくつかの内容があります。タイトです、後で会えるかもしれません。 🎜🎜🎜🎜🎜

以上がvue-cli のカスタム パス エイリアス アセットと静的フォルダーの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。