Vue指定不编译的文件夹和favicon.ico

最新推荐文章于 2024-04-19 23:05:05 发布

Markov Zheng

最新推荐文章于 2024-04-19 23:05:05 发布

阅读量3.5k

点赞数

分类专栏：网络学习日志 vue 文章标签： favicon public static assets 不编译

本文链接：https://blog.youkuaiyun.com/marko_zheng/article/details/99976684

版权

网络学习日志同时被 2 个专栏收录

111 篇文章

订阅专栏

vue

23 篇文章

订阅专栏

本文介绍了如何在Vue2.0项目中指定不被编译的文件夹，如将favicon.ico设置为不编译，并详细解释了Vue2.0中assets和static文件夹的区别。通过修改webpack.prod.conf.js，可以实现public文件夹内文件不被编译，以保持其原始状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue指定不编译的文件夹和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'
}),