效果如下：
实现过程如下：
-
修改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;
});
- 在.env文件中写入环境变量VUE_APP_TIME，记住：一定要以VUE_APP开头。如果没有.env文件就新建一个该文件。
VUE_APP_TIME
- 在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 => { config.plugin('html') .tap(args => { ...
<!-- 需要（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 ...
基于vue写一个实时更新获取本地时间的时间戳。
<template>
<p>当前时间：{{nowTime}}</p>
</template>
<script>
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进行调试了。
但是需要注意的是，这种方法并不能有效地防止用户进行复制和调试。有些浏览器可能会绕过这些限制，因此这种方法只能作为一种简单的防护措施，而不能作为最终的保护手段。
