Vue常用总结
1、Vue中自定义title标签页小图标
1）在vue根目录下放置icon矢量图文件
2）build/webpack.dev.conf.js 文件下添加如下内容
favicon: path.resolve('./aistructure.ico')
3）build/webpack.prod.conf.js 文件下添加如下内容
favicon: path.resolve('./aistructure.ico')
2、Vue中prod和dev环境下请求地址的配置切换
1） 插件安装
npm install --save-dev copy-webpack-plugin
2）新建配置文件
在./static/目录下，创建config.js文件，文件内容如下：
function getURL(){
return {
baseUrl :"你的请求地址(如果以后前后端共用一个服务，那么就是用 '/'就可以了。)", // prod
// baseUrl :"测试请求地址", // dev
}
}
3）./index.html导入配置文件
添加如下内容：
// 在<head></head>头部标签中写入：
<script src="/static/config.js"></script>
4）项目中引用
引用方法为：
getURL().baseUrl
5）总结
所以，我们将config.js放到公共的位置，无论是测试环境，还是生产环境只需要更改下config.js中的IP:PORT地址即可。
3、Vue中prod环境构建时，删除dist目录，并重新生成
每次vue生产环境的构建，即 npm build , dist目录文件会随着build次数越多而堆积到dist目录下，所以需要在构建的时候，删除之前的dist目录，重新构建，减少空间占用。
1）插件安装
npm install --save-dev clean-webpack-plugin
2）配置生产环境文件
build/webpack.prod.conf.js 的plugins节点下添加如下代码：
new CleanWebpackPlugin(
['dist'], //匹配删除的文件
{
root: path.resolve(__dirname, '../'), //根目录
verbose: true, //是否启用控制台输出信息
dry: false, //设置为false,启用删除文件
}
),
通过上述的注释，可以看出来，这儿还有控制台是否输出信息的控制。
4、Vue中prod环境构建，指定文件构建固定位置
这儿以src/config.js为例，其他类似。
1）配置生产环境编译后config.js的文件位置
在build\webpack.prod.conf.js中，加入如下一行：
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
},
{
from:'./src/config.js', to:'assets/config.js'},
])
使用此方法，npm build后，将config.js放置到dist/assets/config.js目录下
转载：https://blog.csdn.net/feifeiyechuan/article/details/116458887
查看评论