指定不编译的文件夹和favicon.ico
Markov Zheng 人气:0指定不编译的文件夹和favicon.ico
在Vue3.0中引入public文件夹,不希望被编译的文件都可以放到这个文件夹下,但是在vue2.0中实现类似的功能,需要自己在webpack.prod.conf.js中做一些配置
这里简单区分一下Vue2.0中的assets和static区别
assets
:各组件中的依赖项,会被编译static
:不会被编译,原样放到dist文件夹下
言归正传,假设不希望被编译的文件全部放在public下,要修改的地方是webpack.prod.conf.js
// copy custom static assets new CopyWebpackPlugin([ //---static文件夹下的文件也不会被编译 { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] }, { from: path.resolve(__dirname, '../public'), to: path.resolve(__dirname, '../dist'), ignore: ['.*'] }, //---这里还能指定特定文件输出的位置和文件名 { from: path.resolve(__dirname, '../public/strings-en.js'), to: path.resolve(config.build.assetsRoot, 'strings.js'), ignore: ['.*'] } ])
指定项目的favicon.ico
同样是修改webpack.prod.conf.js
new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', favicon: 'favicon.ico', //------favicon的路径 inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }),
favicon.ico不能正确显示问题
首先将favicon.ico图片放在根目录下,通过以下两种方法使其显示正确。
方法一:修改index.html文件
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" rel="external nofollow" />
方法二:修改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: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true ... }),
修改配置文件后重启npm run dev,大功告成。
注意:如果打包发布到线上,会导致ico图标不显示的问题,是因为执行npm run build打包后只有static文件夹和index.html文件,找不到根目录下的ico图标,解决办法:把ico图标放到static文件夹下就OK啦。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容