vue-cli4中的配置項

vue-cli4之中默認沒有vue.config.js，所以需要自己來創建配置。vue.config.js就是打包的一些配置。

這是一些比較基礎的配置

module.exports = {
  // 公共路徑(必須有的)
  publicPath: "./",
  // 輸出文件目錄
  outputDir: "dist",
  // 靜態資源存放的文件夾(相對於ouputDir)
  assetsDir: "static",
  // eslint-loader 是否在保存的時候檢查(果斷不用，這玩意兒我都沒裝)
  lintOnSave:false,
  // 我用的only，打包后小些
  runtimeCompiler: false,
  productionSourceMap: true, // 不需要生產環境的設置false可以減小dist文件大小，加速構建
​
  devServer: {
    open: true,  // npm run serve后自動打開頁面
    host: '0.0.0.0',  // 匹配本機IP地址(默認是0.0.0.0)
    port: 8080, // 開發服務器運行端口號
    proxy: null,
  },
  resolve: {
     // resolve是webpack的內置選項，顧名思義，決定要做的事情，也就是說當使用 import "jquery"，該如何去執行這件事
     // 情就是resolve配置項要做的，import jQuery from "./additional/dist/js/jquery" 這樣會很麻煩，可以起個別名簡化操作
     extensions: ['.js', '.vue', '.json'], // 省略擴展名，也就是說.js,.vue,.json文件導入可以省略后綴名，這會覆蓋默認的配置，所以要省略擴展名在這里一定要寫上
     alias: {
        //后面的$符號指精確匹配，也就是說只能使用 import vuejs from "vue" 這樣的方式導入vue.esm.js文件，不能在后面跟上 vue/vue.js
       'vue$': 'vue/dist/vue.esm.js',
      // resolve('src') 其實在這里就是項目根目錄中的src目錄，使用 import somejs from "@/some.js" 就可以導入指定文件，是不是很高大上
       '@': resolve('src')
    }
  }
}

 

按照自己的要求改一下就可以了，注意runtimeCompiler: false,，不能寫成compiler，已經被廢棄了。另外就是把assetsDir設置成 static，一般都是static目錄，不然默認的會是assets。

之后進行打包

cnpm run build