效果如下:
![(https://img-blog.csdnimg.cn/2020041413354165.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyOTI0OA==,size_16,color_FFFFFF,t_70)
实现过程如下:

  1. 修改vue.config.js中关于webpack的配置,保留index.html中的注释。原理可以看vue cli3官网关于 webpack——修改插件选项 部分的描述
    chainWebpack: config => {
       config.plugin('html')
           .tap(args => {
               if(process.env.NODE_ENV === 'production') {
                   args[0].minify.removeComments = false;
               return args;
           });
  1. 在.env文件中写入环境变量VUE_APP_TIME,记住:一定要以VUE_APP开头。如果没有.env文件就新建一个该文件。
VUE_APP_TIME
  1. 在vue.config.js中为VUE_APP_TIME写入当前打包时间
    注意事项:需要安装moment的依赖包来格式化你想要的时间格式 npm install moment
const moment = require('moment');
process.env.VUE_APP_TIME = moment().format('YYYY.MM.DD hh:mm:ss');

4.在index.html中使用该环境变量,大功告成。

<!DOCTYPE html>
<!--<%= VUE_APP_TIME %>-->
<html lang="zh">

贴一份vue.config.js的完整代码

const moment = require('moment');
process.env.VUE_APP_TIME = moment().format('YYYY.MM.DD hh:mm:ss');
module.exports = {
    publicPath: './', // 默认值为'./'
    assetsDir: 'static',
    productionSourceMap: false,
    devServer: {
        port: 9000,
        proxy: {
            '/web': {
                target: 'http://192.168.9.120/',
                changeOrigin: true
    chainWebpack: config => {
        config.plugin('html')
            .tap(args => {
                if(process.env.NODE_ENV === 'production') {
                    args[0].minify.removeComments = false;
                return args;
            });

有用请点赞,谢谢!

效果如下:实现过程如下:修改vue.config.js中关于webpack的配置,保留index.html中的注释。原理可以看vue cli3官网关于webpack——修改插件选项部分的描述 chainWebpack: config =&gt; { config.plugin('html') .tap(args =&gt; { ... <!-- 需要(2021-07-21)格式就用这种写法 --> <template slot-scope="scope"> <span v-if="scope.row.creatTime != null"> {{ parseTime(scope.row.creatTime, "{y}-{m}-{
什么是时间戳 时间戳是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒。 javascript默认精度是毫秒,也就是说生成的时间戳就是13位的,而像c++或者php生成的时间戳默认就是10位的,因为其精度是秒。 vue里如何将转换时间戳 在前后端交互,会经常遇到时间戳,后端传输的数据需要将时间戳转换为‘年月日/时分秒’的格式。 1.使用vue过滤器定义一个过滤器,返回值是拼接的字符串: 时间过滤的代码: filters: { formatDate: function
export function timestampToTime(timestamp) { let now = new Date(timestamp*1000); let year = now.getFullYear(); let month = now.getMonth()+1; let date = now.getDate(); let hour = now.getHours(); 1.问题是微信浏览器的内核已经对页面渲染完了,但是vue的app.js还没有载,导致阻断白屏, 2.几个js的载顺序不对。 3.由于缓存,第一次进入还访问的是以前清掉的的页面 4.还有服务器放包,老是增量放包,全量放页面就访问不到 解决办法如下几种: 1.就是给vue的入口文件个强制刷新,index的meta设置不缓存属性 2.在build的webpack.prod.conf.js改变js的顺序 3.在build的webpack.prod.conf.js的outp
html引入资源时间戳避免缓存 最近看 springboot + bootstrap 相关开源项目的时候 , 发现页面引用 js 资源文件的时候 , 末尾都会时间戳 在线 renren-security 开源项目 项目地址: https://gitee.com/renrenio/renren-security 具体代码如下 <script src="${request.contextPath}/statics/config1.js?_${.now?long}"></scr
webpack打包的时候,为了打包结束后自动生成index.html模板,而不进行手动的创建index.html。需要使用htmlWebpackPlugin插件。下面就来讲解如何使用htmlWebpackPlugin插件来自动生成index.html文件 第一步:安装htmlWebpackPlugin插件 使用命令:npm install html-webpack-plugin -D ...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基于vue写一个实时更新获取本地时间时间戳。 &lt;template&gt; &lt;p&gt;当前时间:{{nowTime}}&lt;/p&gt; &lt;/template&gt; &lt;script&gt; export default{ data(
export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); let o =...
Vue打包后的index.html文件在浏览器如果想要禁止复制,可以在index.html使用JavaScript代码来实现。 具体方法是在index.html以下代码: <script> document.addEventListener('copy', function (e) { e.preventDefault(); </script> 这样就可以禁止在浏览器复制index.html文件了。 如果想要禁止F12调试,可以使用以下代码: <script> document.onkeydown = function (e) { if (e.keyCode == 123) { return false; </script> 这样就可以禁止在浏览器使用F12进行调试了。 但是需要注意的是,这种方法并不能有效地防止用户进行复制和调试。有些浏览器可能会绕过这些限制,因此这种方法只能作为一种简单的防护措施,而不能作为最终的保护手段。