精华内容
下载资源
问答
  • 主要介绍了vue增加强缓存和版本号的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 增加/删除版本号

    2019-02-21 18:07:48
    vue 增加/删除版本号 在开发项目的过程中,可能我们不大想要打包之后的一大串后缀,这时候我们就可以在 webpack.prod.conf.js这个文件里把版本号去掉,这样打包之后的文件就显得简单明了 面临的问题:没有了版本号...

    vue 增加/删除版本号

    在开发项目的过程中,可能我们不大想要打包之后的一大串后缀,这时候我们就可以在 webpack.prod.conf.js这个文件里把版本号去掉,这样打包之后的文件就显得简单明了
    面临的问题:没有了版本号的控制,在我们重新发布新版本的时候,本地可能会有缓存现象,特别是微信端,缓存现象尤其突出,无论你怎样清理缓存,发现缓存现象依然存在,于是你迫不得已,忍痛割爱,只好默默的卸掉微信重新安装

    文件路径: /build/webpack.prod.conf.js

    output:{
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    }
    plugins: [
        new ExtractTextPlugin({
          filename: utils.assetsPath('css/[name].[chunkhash].css'),
          // Setting the following option to `false` will not extract CSS from codesplit chunks.
          // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
          // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
          // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
          allChunks: true,
        }),
    ]
    

    更多详细知识介绍请访问我的个人主页

    展开全文
  • 主要介绍了vue.js编译时给生成的文件增加版本号,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 打包添加版本号

    千次阅读 2020-09-08 17:08:09
    vue 打包添加版本号 1、在文件名后拼接版本号 vue在打包时会用随机字符串作为文件名,控制静态资源及时更新,但是有些时候,浏览器就是不更新,可以在引入静态资源后面再添加版本号vue-cli 2.0 版本 修改 build/...

    vue 打包添加版本号

    1、在文件名后拼接版本号

    vue在打包时会用随机字符串作为文件名,控制静态资源及时更新,但是有些时候,浏览器就是不更新,可以在引入静态资源后面再添加版本号。

    vue-cli 2.0 版本

    修改 build/webpack.prod.conf.js,在 HtmlWebpackPlugin 插件配置项中添加 hash: true

    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
      template: 'index.html',
      inject: true,
      hash: true, // 添加改选项
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    })
    

    vue-cli 3.0 版本

    修改vue.config.js,没有该文件则手动添加

    module.exports = {
      filenameHashing: true
    }
    

    2、添加版本文件

    需要准备一个 Git版本Webpack插件:git-revision-webpack-plugin,该插件可在构建过程中生成VERSION和COMMITHASH文件的Webpack插件,

    地址:http://npm.taobao.org/package/git-revision-webpack-plugin。

    安装本地开发依赖

    webpack 4 及以上

    npm install --save-dev git-revision-webpack-plugin
    // 或
    cnpm install --save-dev git-revision-webpack-plugin
    

    webpack 4 及以下

    npm install --save-dev git-revision-webpack-plugin@2.5.1
    // 或
    cnpm install --save-dev git-revision-webpack-plugin@2.5.1
    

    另外,还需要在 build/webpack.prod.conf.js 中增加以下代码:

    ……//省略代码
     
    const GitRevisionPlugin = require('git-revision-webpack-plugin')   //new add.
    
    const env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : require('../config/prod.env')
    
    const webpackConfig = merge(baseWebpackConfig, {
     
    ……//省略代码
     
      plugins: [
        // http://vuejs.github.io/vue-loader/en/workflow/production.html
        new GitRevisionPlugin(),    //new add.
        new webpack.DefinePlugin({
          'process.env': env
        }),
    
    ……//省略代码
     
      ]
    })
     
    ……//省略代码
    

    然后 执行 ‘npm run build’,dist 目录下会生成 VERSION 和 COMMITHASH 文件

    展开全文
  • vue打包加版本号

    千次阅读 2020-03-04 15:29:41
    vue打包会用随机字符串作为文件名,控制静态资源及时更新,但是有些时候,浏览器就是不更新,可以在引入静态资源后面再添加版本号vue-cli 2.0 修改build/webpack.prod.conf.js,在HtmlWebpackPlugin插件配置项...

    vue打包会用随机字符串作为文件名,控制静态资源及时更新,但是有些时候,浏览器就是不更新,可以在引入静态资源后面再添加版本号。

    vue-cli 2.0

    修改build/webpack.prod.conf.js,在HtmlWebpackPlugin插件配置项中添加hash: true

    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      hash: true, // 添加改选项
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    })

    vue-cli 3.0

    修改vue.config.js,没有该文件则手动添加

    module.exports = {
      filenameHashing: true
    }

     

    展开全文
  • 但在这里推荐一个较为规范的版本号添加方案 在HTML5中,meta标签中的属性值可以很好的解决标记版本问题 在index.html中定义如下 <meta name="revised" content="定义页面的最新版本"/>

    场景

    前端开发需要确认已发布,测试是否成功发布本次项目代码。

    解决方案

    在HTML中写一段特殊标记即可(即版本号),那么这个版本号应该放在哪里呢?

    在sessionStorage,或者localStorage中添加一项记录,这确实可以达到标记的目的。

    但在这里推荐一个较为规范的版本号添加方案

    在HTML5中,meta标签中的属性值可以很好的解决标记版本问题

    在index.html中定义如下

    <meta name="revised" content="定义页面的最新版本"/>

    发布后查看源代码,在源代码中看到对应发布的版本号,即说明本次代码发布成功!

    到这里已经解决版本号的问题了。

     


    下面介绍的是vue项目打包动态更新版本号

    打包时仅修改package.json文件中的version对应值即可。

    由于vue的最新版本已经集成了htmlWebpackPlugin,所以我们只需要添加在根目录一个名为vue.config.js的文件

    重点是在index属性下添加:

     meta: {revised: `版本号, ${packageInfo.version}`}

    具体设置可以参考相关文档,相关配置如下:

    const packageInfo = require('./package.json'); // 这里拿到package.json的相关信息
    module.exports = {
      pages: {
        index: {
          // page 的入口
          entry: 'src/main.js',
          // 模板来源
          template: 'public/index.html',
          // 在 dist/index.html 的输出
          filename: 'index.html',
          // 当使用 title 选项时,
          // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: '页面title',
          // 在这个页面中包含的块,默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
          chunks: ['chunk-vendors', 'chunk-common', 'index'],
          meta: {revised: `版本号, ${packageInfo.version}`}
        },
        // 当使用只有入口的字符串格式时,
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话,就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        // subpage: 'src/subpage/main.js'
      }
    }
    

    记录到这里完结了,最后祝愿大家521快乐!

    展开全文
  • vue打包时给静态资源增加版本号

    千次阅读 2019-08-29 17:39:12
    1.增加版本变量(版本号暂时用时间代替) var Version = new Date().getTime(); 2.修改要生成的js和css文件的配置项,把刚刚声明的版本拼接进要生成的文件名中; output: { path: config.build.assetsRoot, ...
  • vue 添加版本号

    千次阅读 2019-03-25 17:33:20
    router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title ... * 添加版本号 **/ if (document.URL.indexOf('?t=') < 0) { let timestamp = (new Date())....
  • 场景: 增加 js, css 版本号 , 避免缓存 方案: Vue Cli3Vue.config.js 中的 configureWebpack 进行配置: output 配置js plugins 配置css 下方js路径 决定了 在dist 中文件路径 在上面代码之前准备: 时间戳作为...
  • vue3vue3版本变化

    2021-04-23 22:29:54
    css样式穿透 /deep/失效 vue3+vue-cli4里面/deep/自测不生效。 请使用 :deep(.className){ } 九. 增加 css动态样式 在style里面使用v-bind()动态更改样式,编译后是一个var()函数 <template> ...
  • vue.js编译时给生成的文件增加版本号,解决js缓存问题
  • vuecli3项目总配置文件及描述 module.exports = { publicPath:"/", outputDir: 'dist', // 构建输出目录 assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts) lintOnSave: false, // 是否开启eslint...
  • 为了实现项目上传后不存在缓存问题,需要在webpack中加上配置信息 在项目根目录中添加vue.config.js文件 const Timestamp = new Date().getTime(); module.exports = { ... // 给js和css配置版本号
  • vue 用webpack打包文件名添加版本号

    万次阅读 2018-08-08 14:23:37
    因此在打包的文件名中添加一个版本号以便浏览器能区分。 解决方法:找到webpack .prod.conf.js  1.定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ,也可以自己定义成别的...
  • 一、版本号介绍 1、版本号命名规范: 插件版本号有四个部分组成: 1)、主版本号:一半当功能模块有较大的变动,比如增加模块或是整体架构发生变化
  • 在项目的根目录创建文件vue.config.js,然后再该文件中配置对应的打包输出,具体如下:const path = require("path");const systemConfig = require("./src/lib/system.config"); //自定义的文件,获取自己定义的配置...
  • 在build/webpack.prod.conf.js文件里面修改如下: 添加const Version = new Date().getTime(); ...打包后的js文件:(css文件同理,后面都会添加上版本号,也就是个时间戳) --------完。 ...
  • 2、在需要给静态文件添加版本号时在根目录允许nodestaticversion 注:我的项目static文件夹下放了一个H5项目,每次改动H5项目后需要运行nodestaticversion来给引用的图片或者html中引用的css、js文件等添加版本号以...
  • 在APP.vue 中写一个版本号,在静态文件再写一个版本号,相互印证,如果不一样的话,就调用 location.reload() 自动刷新页面 app.vue 代码 var version = this.version; //版本号(每次上线前需要更新下版本号) ...
  • vue cli3.0 build 打包 的 js 文件添加版本号 解决 js 缓存问题
  • 该文档写的非常的完善,对应当前版本需要注意vue的脚手架已经更新到最新版本, 如果按照之前的方法的话事没有vue ui的, https://blog.csdn.net/Luckydog_li/article/details/107721892 这个文章讲的非常好,版本...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,382
精华内容 2,952
关键字:

vue3增加版本号

vue 订阅