vue 脚手架打包 生成时间戳版本号

首先在

vue.config.js 配置

配置如下

  注释的内容  可以取消正常使用, 不使用的原因是, 代码不是特别重要,不用混淆,  代理,也不用开, 老子是后端, 可以随时改接口 /手动滑稽 

//const UglifyPlugin = require('uglifyjs-webpack-plugin')
const Version = new Date().getTime();
module.exports = {
  // 基本路径
  publicPath: "/",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // webpack配置 
  chainWebpack: () => { },
  configureWebpack:  {  
    output: {
      filename: `js/[name].${Version}.js`,
      chunkFilename:`js/[name].${Version}.js`
    }
  
  },
  productionSourceMap: false,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: { 
    filename:`css/[name].${Version}.css`,
    chunkFilename:`css/[name].${Version}.css`
    },
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false,
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require("os").cpus().length > 1,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: true, //配置自动启动浏览器
    host: "192.168.3.6",
    port: 8080, // 当前vue项目 端口号
    https: false,
    hotOnly: false, // https:{type:Boolean}
    // proxy: {
    //   // 配置多个代理
    //   "/api": {
    //     target: "http://localhost:8081",//这里改成你自己的后端api端口地址，记得每次修改，都需要重新build
    //     ws: true,
    //     changeOrigin: true,
    //     pathRewrite: {
    //       // 路径重写，
    //       "^/apb": "" // 替换target中的请求地址
    //     }
    //   },
    //   "/images": {
    //     target: "http://localhost:8081",
    //     ws: true,
    //     changeOrigin: true
    //   }, 
    // },
    before: app => { }
  },
  // 第三方插件配置
  pluginOptions: {

  },  // js 混淆
  //   configureWebpack: (config) => {  
  //       // 将每个依赖包打包成单独的js文件
  //       let optimization = {
  //         minimizer: [new UglifyPlugin({
  //             uglifyOptions: {
  //                 warnings: false,
  //                 compress: {
  //                   drop_console: true, 
  //                   drop_debugger: false,
  //                   pure_funcs: ['console.log'] 
  //                 }
  //             }
  //          })]
  //       }
  //       Object.assign(config, {
  //         optimization
  //       })

  // }
}

生成如下

我们 发现时间戳前面还有段哈希,,我们不想要怎么办?

在路由 要加

 import( /* webpackChunkName: "1" */ "@/views/gas/22.vue");

就ok了

如果觉得这样的很丑,我们想 在js 后面加一个版本

修改下面的就行了

 filename:`css/[name].css?Version=${Version}`

 filename:`js/[name].js?Version=${Version}`