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