前に書かれています:
これは、vue-cli のいくつかの小さな知識ポイントの簡単な紹介であり、vue-cli のスキャフォールディングを初めて使用する学生や、それについてあまり知らない学生に適しています。それを避けてください。困っている友達は参考にしていただければいいねやフォローしていただけると幸いです。
vue-cli には静的リソースを配置する場所が 2 つあることは多くの人が知っていると思います。それは、src/assets フォルダーと です。 >static フォルダーですが、この 2 つの違いがよくわからない人も多いかもしれません。 src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。
assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在 <img src="./logo.png" 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放可能会变动的文件。
因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。
js部分：
data () {
return {
imgUrl: '图片地址',//错误写法
imgUrl: require('图片地址')//正确的写法
}
}
template部分：
img标签形式：
<img :src="img" / alt="vue-cli のカスタム パス エイリアス アセットと静的フォルダーの違い" >
或者p背景图形式：
<p :style="{backgroundImage: 'url(' + img + ')'}"></p>说了图片就正好再提一下vue-cli的一个图片有关的配置，下图这个配置的意思是：在10000b 的图片以下进行base64转换，所以如果项目中有些比较小的icon就不用再进行图片精灵的处理了
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’，亲测，这里就算多层嵌套也可以成功找到路径。
很多人像我一样，刚开始的会安装很多插件，然后最后在项目中并没有用到。那之前安装的插件太多了，连自己都忘记了安装了哪些插件？
在上图所示位置，我们项目安装的所有的模块依赖都在这个pageage.json文件中，当我们需要整理一波自己的依赖的时候，可以在这个文件里面找有没有现在已经没用的依赖，可以使用命令行npm remove 模块名字来删除没用的模块。
上面的这些依赖有些只在开发环境里面使用的模块，有的在项目上线之后还是要继续依赖的模块。他们之间的区别就在于我们平时安装模块依赖时的：--save-dev和 --save
当你使用--save-dev安装依赖的时候就会放在package.json的devDependencies对象下面，相反的，当你使用--save
<img src="./logo.png" alt="vue-cli のカスタム パス エイリアス アセットと静的フォルダーの違い" > と background: url(./logo.png) では、「./logo. png" は、モジュールの依存関係として Webpack によって解析される相対リソース パスです。 static/ ディレクトリ内のファイルは Webpack では処理されません。最終的なパッケージ化ディレクトリ (デフォルトは dist/static) に直接コピーされます。 これらのファイルは、config.js ファイル内の build.assetsPublicPath および build.assetsSubDirectory 接続によって決定される絶対パスを使用して参照する必要があります。
実際の開発では、 一般に次のようになります:静的は変更されないファイルを保存し、アセットは変更される可能性のあるファイルを保存します。
js データで画像を参照する方法
画像について話した後、vue-cli の画像関連の設定について触れたいと思います。以下の画像の設定は、プロジェクト内に比較的小さなアイコンがいくつかある場合に、10000b の画像の下で Base64 変換を実行することを意味します。 、する必要はありません 画像スプライトは処理されます
vue-cliはwebpackを使用します、webpackカスタムエイリアス関数、カスタムエイリアス関数も使用できますマルチの場合-layer フォルダー ネストする場合、レイヤーごとにパスを探す必要はありません。カスタム エイリアスを使用してファイルの場所を直接見つけることができます。
🎜🎜清掃プロジェクト 役に立たないプラグイン🎜🎜 私と同じように、多くの人は最初にたくさんのプラグインをインストールしますが、結局プロジェクトでそれらを使用しなくなるでしょう。これまでに非常に多くのプラグインがインストールされているのに、どのプラグインをインストールしたか忘れてしまったということはありませんか? 🎜🎜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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
