vue 學習 cli3常用配置

---恢復內容開始---

cli3以后，構建的項目更加的簡潔，配置文件也沒有向cli2那樣暴漏出來，但這並不代表cli3是不可配置的，我們只需要在根目錄下添加一個vue.config.js作為項目的配置文件，就可以愉快的配置我們的項目了

 

以下就是本人常用的配置項，如果想了解更多的可以去https://cli.vuejs.org/zh/config/查看

 

let path = require("path");
module.exports = {
  // https://api.blockbcd.top/index/
  lintOnSave: false,//是否在每次保存時使用eslint檢查，這個對語法的要求比較嚴格，對自己有要求的同學可以使用
  productionSourceMap: false,//不允許打包時生成項目來源映射文件，在生產環境下可以顯著的減少包的體積
  //注 Source map的作用：針對打包后的代碼進行的處理，就是一個信息文件，里面儲存着位置信息。也就是說，轉換后的代碼的每一個位置，所對應的轉換前的位置。有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉換后的代碼。這無疑給開發者帶來了很大方便。
  publicPath: "./",//配置為相對路徑，這樣打包之后的包才能正常使用
  css: {
    extract: true,//是否啟用css分離插件，默認是true，如果不啟用css樣式分離插件，打包出來的css是通過內聯樣式的方式注入至dom中的，詳細了解https://www.cnblogs.com/xiaokebb/p/8274889.html
    sourceMap: false,//效果同上
    modules: false,// // 為所有的 CSS 及其預處理文件開啟 CSS Modules。
    // 這個選項不會影響 `*.vue` 文件。
  },
  devServer: { //配置開發服務器
    host: "0.0.0.0",
    hot: true,//是否啟用熱加載，就是每次更新代碼，是否需要重新刷新瀏覽器才能看到新代碼效果
    port: "8083",//服務啟動端口
    open: false,//是否自動打開瀏覽器默認為false
    proxy: { //配置http代理
      "/@url": { //如果ajax請求的地址是https://api.yuming.com/api1那么你就可以在jajx中使用/@url/api1路徑,其請求路徑會解析
        // https://api.yuming.com/@url/api1，當然你在瀏覽器上開到的還是http://localhost:8080/@url/api1;
        target: "https://api.blockbcd.top/index/",
        changeOrigin: true,//是否允許跨域，這里是在開發環境會起作用，但在生產環境下，還是由后台去處理，所以不必太在意
        pathRewrite: {
          "/@url": "" // 把解析出來的接口地址中的多出來的@url替換成空字符，其目的就是去掉多余的它，不然地址上多了一個@url時無法正確訪問的。
          //當然如果你的接口地址上本來就有@url，解析之后認識爭取的
        }
      },
      "/url2": {//可以配置多個代理，匹配上那個就使用哪種解析方式
        target: "https://api2",
        // ...
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {//定義一個全局的less文件，把公共樣式變量放入其中，這樣每次使用的時候就不用重新引用了
      preProcessor: 'less',
      patterns: [
        './src/assets/public.less'
      ]
    }
  },
  chainWebpack(config) { //添加一個路徑別名 假設有在assets/img/menu/目錄下有十張圖片，如果全路徑require("/assets/img/menu/img1.png")
                         //去引入在不同的層級下實在是太不方便了，這時候向下方一樣定義一個路勁別名就很實用了
    config.resolve.alias
      .set("assets", path.join(__dirname, "/src/assets"))//添加多個別名支持鏈式調用
      .set("img", path.join(__dirname, "/src/assets/img/menu"))//引入圖片時只需require("img/img1.png");即可
  }
}

 

 

 

 

---恢復內容結束---