一、Vue常用总结

最新推荐文章于 2024-08-01 14:29:45 发布

feifeiyechuan

最新推荐文章于 2024-08-01 14:29:45 发布

阅读量245

点赞数

分类专栏： # 【前端】Vue 文章标签： Vue 常用总结

本文链接：https://blog.csdn.net/feifeiyechuan/article/details/116458887

版权

【前端】Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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'},
    ])