vue.js에 파비콘 아이콘을 추가하는 방법

vue.js에 파비콘 아이콘을 추가하는 방법: 1. [index.html] 파일을 수정합니다. 코드는 [이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 문서는 모든 브랜드의 컴퓨터에 적용됩니다.

]

vue.js에 파비콘 아이콘을 추가하는 방법:

방법 1: index.html 파일 수정

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

단점: favicon.ico를 복사해야 합니다. 패키징 후 루트 디렉터리

방법 2: webpack 구성 파일 수정

favicon.ico复制到根目录

方法二：修改webpack配置文件

1、找到build下的webpack.dev.conf.js文件

new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico') // 新增
}),

2、找到build下的webpack.prod.conf.js文件

new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico'), //新增
minify: {
emoveComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
...
}),

方法三 ：vue项目打包后favicon无法正常显示

解决方法：

在webpack.prod.config.js中的HtmlWebpackPlugin插件选项中配置favicon选项，其中favicon的路径是个相对路径

new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: 'src/assets/img/favicon.ico',
inject: true
}),

修改配置文件后需重启npm run dev1. build

rrreee

에서 webpack.dev.conf.js 파일을 찾습니다. 2. build

에서 webpack.prod.conf.js 파일을 찾습니다. rrreee

방법 3: vue 프로젝트를 패키징한 후 파비콘을 사용할 수 없습니다. 일반 디스플레이

해결책:

🎜webpack.prod.config.js의 HtmlWebpackPlugin 플러그인 옵션에서 파비콘 옵션을 구성합니다. 여기서 파비콘 경로는 은 상대 경로입니다🎜rrreee🎜구성 파일을 수정한 후 npm run dev를 다시 시작해야 합니다 🎜🎜패키징 후 루트 디렉터리에 favicon.ico가 있습니다🎜🎜🎜관련 무료 학습 권장 사항: 🎜 JavaScript🎜(동영상) 🎜🎜

위 내용은 vue.js에 파비콘 아이콘을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!