vue直接引入js文件没有用,vue编译后的文件
本文主要介绍Vue如何指定不会被编译的文件夹和favicon.ico。有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
指定未编译的文件夹和favicon.ico这里简单区分一下Vue2.0中的assets和static，指定项目的Favicon.ico不能正确显示问题。方法1:修改index.html文件。方法2:修改webpack配置文件。
指定不编译的文件夹和favicon.ico
Vue3.0中引入了public文件夹，不想编译的文件可以放在这个文件夹中。但是，要在vue2.0中实现类似的功能，需要在webpack.prod.conf.js中做一些配置
这里简单区分一下Vue2.0中的assets和static区别
资产：将编译每个组件中的依赖关系。静态：不会被编译。照原样放在dist文件夹里。言归正传，假设所有不想编译的文件都放在公共场合，要修改的地方是webpack.prod.conf.js
//复制自定义静态资产
新建CopyWebpackPlugin([
//-静态文件夹下的文件也不会被编译。
{
from: path.resolve(__dirname，./static’)，
to:config . build . assets子目录，
忽略：[。*]
},
{
from: path.resolve(__dirname，./public’)，
to: path.resolve(__dirname，./dist )，
忽略：[。*]
},
//-在这里，您还可以指定特定文件的输出位置和文件名。
{
from: path.resolve(__dirname，./public/strings-en.js )，
to:path . resolve(config . build . assets root， strings.js )，
忽略：[。*]
}
])
指定项目的favicon.ico
同样是修改webpack.prod.conf.js
新建HtmlWebpackPlugin({
文件名：config.build.index，
模板：“index.html”，
Favicon: favicon.ico ，//- Favicon的路径
注射：真的，
缩小：{
removeComments:真的，
collapseWhitespace: true，
removeAttributeQuotes: true
//更多选项：
//https://github . com/kangax/html-minifier # options-快速参考
},
//需要通过CommonsChunkPlugin一致地处理多个块
chunksSortMode:“依赖关系”
}),
favicon.ico不能正确显示问题
首先将favicon.ico图片放入根目录，通过以下两种方法使其正确显示。
方法一：修改index.html文件
link rel=快捷图标 type= image/x-icon href= favicon . ico rel=外部nofollow /
方法二：修改webpack配置文件
1.在build下找到webpack.dev.conf.js文件。
新建HtmlWebpackPlugin({
文件名：“index.html”，
模板：“index.html”，
注射：真的，
favicon:path . resolve( favicon . ico )//增加
}),
2.在build下找到webpack.prod.conf.js文件
新建HtmlWebpackPlugin({
文件名：config.build.index，
模板：“index.html”，
注射：真的，
favicon:path . resolve( favicon . ico )，//new
缩小：{
removeComments:真的，
collapseWhitespace: true，
removeAttributeQuotes: true
.
}),
修改配置文件后，重启npm run dev，就大功告成了。
注意：如果是在线发布的包，ico图标不会显示，因为npm运行构建包之后只有静态文件夹和index.html文件，在根目录下找不到ico图标。解决方法：只需将ico图标放在静态文件夹中。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。