首先在

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了