// vue.config.js
 
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
 
module.exports = {
  // 項(xiàng)目部署的基本路徑,默認(rèn)假設(shè)你的應(yīng)用將會(huì)部署在域名的根部,比如，https://www.vue-cli.com/
  // 如果你的應(yīng)用是部署在一個(gè)子路徑下，那么你需要在這里指定子路徑，比如，
  // 如果你部署在 https://www.my-vue.com/my-app/; 那么將這個(gè)值改為 “/my-app/”
  publicPath: "/",
 
  // 將構(gòu)建好的文件輸出到哪里 當(dāng)運(yùn)行 vue-cli-service build 時(shí)生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄。
  // 注意目標(biāo)目錄在構(gòu)建之前會(huì)被清除 (構(gòu)建時(shí)傳入 --no-clean 可關(guān)閉該行為)。
  outputDir: "dist",
 
  // 放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄。
  assetsDir: "static",
 
  // 指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑。
  indexPath: 'index.html',
 
  // 默認(rèn)在生成的靜態(tài)資源文件名中包含hash以控制緩存
  filenameHashing: true,
 
  // 是否在開發(fā)環(huán)境下通過eslint-loader在每次保存時(shí)lint代碼。這個(gè)值會(huì)在@vue/cli-plugin-eslint 被安裝之后生效。
  // 設(shè)置為 true 時(shí), eslint-loader 會(huì)將 lint 錯(cuò)誤輸出為編譯警告。默認(rèn)情況下， 
  // 警告僅僅會(huì)被輸出到命令行，且不會(huì)使得編譯失敗。
  // 如果你希望讓 lint 錯(cuò)誤在開發(fā)時(shí)直接顯示在瀏覽器中，你可以使用 lintOnSave: 'error'。
  // 這會(huì)強(qiáng)制 eslint-loader 將 lint 錯(cuò)誤輸出為編譯錯(cuò)誤，同時(shí)也意味著 lint 錯(cuò)誤將會(huì)導(dǎo)致編譯失敗。
  lintOnSave: true,
 
  // 是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。設(shè)置為 true 后你就可以在 Vue 組件中使用 
  // template 選項(xiàng)了，但是這會(huì)讓你的應(yīng)用額外增加 10kb 左右。
  runtimeCompiler: false,
 
  // 默認(rèn)情況下 babel-loader 會(huì)忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式
  // 轉(zhuǎn)譯一個(gè)依賴，可以在這個(gè)選項(xiàng)中列出來。
  transpileDependencies: [],
 
  // 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。
  productionSourceMap: true,
 
  // 向 CSS 相關(guān)的 loader 傳遞選項(xiàng)
  css: {
    // 當(dāng)為true時(shí)，css文件名可省略 module 默認(rèn)為 false
    modules: false,
    // 是否將組件中的 CSS 提取至一個(gè)獨(dú)立的 CSS 文件中,當(dāng)作為一個(gè)庫構(gòu)建時(shí)，你也可以將其設(shè)置為 false 免得用戶自己導(dǎo)入 CSS
    // 默認(rèn)生產(chǎn)環(huán)境下是 true，開發(fā)環(huán)境下是 false
    extract: false,
    // 是否為 CSS 開啟 source map。設(shè)置為 true 之后可能會(huì)影響構(gòu)建的性能
    sourceMap: false,
    /*為預(yù)處理器 loader 傳遞自定義選項(xiàng)*/
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variable.scss";`,// 預(yù)設(shè)全局css變量
      },
      css: {
        // 這里的選項(xiàng)會(huì)傳遞給 css-loader
      },
      postcss: {
        // 這里的選項(xiàng)會(huì)傳遞給 postcss-loader
      }
    },
  },
 
  // 是一個(gè)函數(shù)，會(huì)接收一個(gè)基于 webpack-chain 的 ChainableConfig 實(shí)例。允許對(duì)內(nèi)部的 
  // webpack 配置進(jìn)行更細(xì)粒度的修改。
  chainWebpack: config => {
    // 添加別名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("utils", resolve("src/utils"))
      .set("api", resolve("src/api"));
  },
 
  // 是否為 Babel 或 TypeScript 使用 thread-loader。該選項(xiàng)在系統(tǒng)的 CPU 有多于
  //一個(gè)內(nèi)核時(shí)自動(dòng)啟用，僅作用于生產(chǎn)構(gòu)建。
  parallel: require("os").cpus().length > 1,
 
  // 向 PWA 插件傳遞選項(xiàng)。
  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
 
  // 所有 webpack-dev-server 的選項(xiàng)都支持。
  // 注意：有些值像 host、port 和 https 可能會(huì)被命令行參數(shù)覆寫。
  // 有些值像 publicPath 和 historyApiFallback 不應(yīng)該被修改，因?yàn)樗鼈冃枰烷_發(fā)服務(wù)器的 publicPath 同步以保障正常的工作。
  // 本地服務(wù)配置
  devServer: {
    host: "0.0.0.0",
    port: 8080, // 端口號(hào)
    https: false, // https:{type:Boolean}
    open: true //配置自動(dòng)啟動(dòng)瀏覽器  open: 'Google Chrome'-默認(rèn)啟動(dòng)谷歌
 
    // 配置跨域代理
    proxy: {
    // 說明：
    // 瀏覽器有同源策略不支持跨域，但服務(wù)器沒有，通過proxy配置，將對(duì)于接口服務(wù)器的請(qǐng)求代理到本地服務(wù)器，
    // 再由本地服務(wù)器轉(zhuǎn)發(fā)到接口服務(wù)器（target目標(biāo)服務(wù)器），所以設(shè)置代理后，
    // 接口請(qǐng)求路徑會(huì)變成代理服務(wù)器地址，即本地地址localhost 或者 127.0.0.1
 
    // 配置：
    // '/api'可以是任何值，表示以/api開頭的請(qǐng)求，實(shí)際項(xiàng)目中所以路徑以/api開頭的請(qǐng)求都會(huì)被本地服務(wù)器轉(zhuǎn)發(fā)
    '/api': {
      // target指想要被代理的后端接口服務(wù)器地址(目標(biāo)路徑)(真正請(qǐng)求的服務(wù)器地址)
      target: 'http://192.168.6.267:8080',
      // pathRewrite用以在發(fā)送請(qǐng)求時(shí)，重寫請(qǐng)求路徑
      // 如果在實(shí)際的請(qǐng)求路徑中你不希望出現(xiàn)/api，那么可以重寫路徑，在請(qǐng)求路徑中去掉/api，如下所示
      pathRewrite: {
        // 舉例：
        // 如果你的接口服務(wù)地址為：http://192.168.6.267:8080，你的接口路徑為/base/company/list
        // 那么為了可以使用/api代理，你可以在接口路徑前添加/api，如：/api/base/company/list
        // 那么你的請(qǐng)求就會(huì)被本地服務(wù)代理到真正的接口地址，解決了跨域問題
        // 但是你的請(qǐng)求路徑就會(huì)變成：http://192.168.6.267:8080/api/base/company/list，路徑中多余/api
        // 那么你可以通過重寫（如下方式）去掉/api
        // 或者你可以選擇將/api改為/base，就不需要重寫路徑了，具體的使用根據(jù)業(yè)務(wù)來決定
        '^/api': ''
      }
    }
  },
  },
 
  // 第三方插件選項(xiàng)
  // 這是一個(gè)不進(jìn)行任何 schema 驗(yàn)證的對(duì)象，因此它可以用來傳遞任何第三方插件選項(xiàng)。
  pluginOptions: {}
};

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    //基本路徑
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    //輸出目錄
	outputDir: 'dist',
	//指定生成的文件
	indexPath: 'index.html',
	//vue兼容ie
	transpileDependencies: true,
	//是否啟用eslint驗(yàn)證
	lintOnSave: false,
	//開發(fā)環(huán)境配置
	devServer: {
	    //允許別人訪問自己的ip地址
		host: '0.0.0.0',
		//代理配置
		proxy: {
            '/api': {
                target: 'https://192.168.x.xxx:8080/',//接口的域名
                ws: true,//是否代理websockets
                secure: false,//是否是https接口
                changeOrigin: true,//是否跨域
                pathRewrite: {//重寫地址，將前綴/api轉(zhuǎn)為""
                	'^/api': ""
                }
            }
        }
	}
})