vue-cli의 사용자 정의 경로 별칭 자산과 정적 폴더의 차이점

앞에 작성됨:

vue-cli 스캐폴딩을 처음 접하는 학생들과 그것에 대해 잘 모르는 사람들에게 적합합니다. 그것을 피하십시오. 도움이 필요한 친구들은 참고할 수 있습니다. 좋아요를 누르거나 팔로우를 하시면 모두에게 도움이 되기를 바랍니다.

정적 리소스 처리:

자산과 정적 폴더의 차이점

많은 사람들이 vue-cli에 정적 리소스를 배치할 수 있는 두 장소, 즉 src/assets 폴더와 static 폴더를 사용하면 많은 사람들이 둘 사이의 차이점을 명확하게 알지 못할 수 있습니다. 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放可能会变动的文件。

在js数据中如何引用图片

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

js部分：
    data () {
        return {
             imgUrl: '图片地址',//错误写法 
            imgUrl: require('图片地址')//正确的写法
        }
}
template部分：
img标签形式：
<img  :src="img" / 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="./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]) 형식으로 참조되어야 합니다.

실제 개발에서는 일반적으로 정적은 변경되지 않는 파일을 저장하고 자산은 변경될 수 있는 파일을 저장합니다.

js 데이터에서 이미지를 참조하는 방법

웹팩은 이미지를 모듈로 참조하기 때문에 이미지를 직접 참조하려면 문자열 형식이 아닌 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 제거 모듈 이름 명령줄을 사용하여 쓸모 없는 모듈을 삭제할 수 있습니다. 🎜🎜 –save-dev와 –save의 차이점🎜🎜위 종속성 중 일부는 개발 환경에서만 사용되는 모듈이고 일부는 프로젝트가 온라인 상태가 된 후에도 계속 의존하게 될 모듈입니다. 이들 사이의 차이점은 일반적으로 모듈 종속성을 설치할 때: --save-dev 및 --save🎜🎜 --save-를 사용할 때 dev 는 종속성을 설치하며 package.json의 devDependency 개체 아래에 배치됩니다. 반대로 --save를 사용하여 종속성을 설치하면 종속성 개체 아래에 나타납니다. 🎜🎜요약: 🎜* –save-dev는 개발할 때 사용하는 항목이고, –save는 게시 후에도 계속 사용하는 항목입니다. *🎜🎜🎜vue-cli 구성에 대해 이전에 두 개의 기사를 작성했습니다. 필요한 학생은 다음을 참조하세요. 🎜🎜vue-cli 스캐폴딩 사용 방법을 가르쳐 주세요.🎜🎜vue-cli 스캐폴딩에서 jQuery, 부트스트랩 및 사용을 참조하세요. css with sass and less🎜🎜Afterword🎜🎜위 내용은 제가 한동안 진행한 실습 프로젝트의 소소한 내용입니다. 꽉, 나중에 만날 수도 있어요. 🎜🎜🎜🎜🎜

위 내용은 vue-cli의 사용자 정의 경로 별칭 자산과 정적 폴더의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!