vue ui ; 一個(gè)ui版界面，用于創(chuàng)建vue項(xiàng)目；

const router = new VueRouter({
 base: '/',
 mode: 'history', //還可設(shè)置為'hash'模式
 routes
})

// const webpack = require('webpack')

module.exports = {
  lintOnSave: false, // 禁止eslint
  devServer: {
    open: true, // 構(gòu)建完成自動(dòng)打開瀏覽器
  },

  configureWebpack: {
    plugins: [
      // 全局配置node_modules中的模塊，使用時(shí)無(wú)需引入
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"
      })
    ]

  },

  // webpack 鏈接 API，用于生成和修改 webapck 配置
  chainWebpack: (config) => {
    // 取消 chunks，每個(gè)頁(yè)面只對(duì)應(yīng)一個(gè)單獨(dú)的 JS / CSS
    config.optimization.splitChunks({
      cacheGroups: {}
    });

    // config
    //   .plugin('webpack-bundle-analyzer')
    //   .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  },

  pluginOptions: {

  }
}

npm run serve

import Home from '../views/Home.vue'

const routes = [
 {
  path: '/',
  name: 'Home',
  // component: Home
  component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue') // webpack的魔法注釋，將拆分出的js命名為home
 },
 {
  path: '/about',
  name: 'About',
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
 }
]

cnpm i cress-env --save-dev // 更改node環(huán)境變量插件

"scripts": {
  "serve": "cross-env NODE_ENV=development vue-cli-service serve",
  "test": "cross-env NODE_ENV=test vue-cli-service build",
  "build": "cross-env NODE_ENV=production vue-cli-service build"
 },

console.log(process.env.NODE_ENV)

// 開發(fā)環(huán)境地址(npm run serve)
const devHost = {
 // 接口地址域名相關(guān)
 baseApi: 'https://abc.com',

}

// 測(cè)試環(huán)境地址(npm run test)
const testHost = {
 // 接口地址域名相關(guān)
 baseApi: 'https://abc.com',

}

// 線上環(huán)境地址(npm run build)
const proHost = {
 // 接口地址域名相關(guān)
 baseApi: 'https://abc1.com',

}

// 區(qū)分環(huán)境選擇靜態(tài)資源地址
const env = process.env.NODE_ENV

let exportConfig = ''
if (env === 'production') {
 exportConfig = proHost
} else if (env === 'test') {
 exportConfig = testHost
} else {
 exportConfig = devHost
}

export default exportConfig

const webpack = require('webpack')

const processEnv = process.env.VUE_APP_ENV; // 區(qū)分環(huán)境(值：production、development、test)
const isPro = processEnv === 'production'; // 判斷production環(huán)境

const outputDir = 'dist'; // 輸出文件目錄（默認(rèn)dist）
const assetsDir = ''; // 配置放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄

// 區(qū)分環(huán)境選擇cdn地址
let publicPath = '' // 靜態(tài)資源引用路徑
let fontPublicPath = '' // 字體圖標(biāo)引用的cdn路徑
let imgPublicPath = '' // css引用圖片的cdn路徑（c2c/static/img）
if (processEnv === 'production') {
  publicPath = 'https://abc.com/c2c/shop' // 正式環(huán)境靜態(tài)資源css、js等cdn路徑
  fontPublicPath = `https://abc.com/c2c/shop/${assetsDir ? assetsDir + '/' : '/'}fonts` // 正式環(huán)境字體圖標(biāo)引用的cdn路徑
  imgPublicPath = `https://abc.com/c2c/shop/${assetsDir ? assetsDir + '/' : '/'}/img` // 正式環(huán)境css引用圖片的cdn路徑
} else if (processEnv === 'test') {
  // publicPath = './' // 正式環(huán)境靜態(tài)資源css、js等cdn路徑
  publicPath = 'https://bcd.com/c2c/shop/dist' // 測(cè)試環(huán)境靜態(tài)資源css、js等cdn路徑
  fontPublicPath = ''
  imgPublicPath = ''
} else {
  publicPath = '/'
  fontPublicPath = ''
  imgPublicPath = ''
}

const devServerHost = 'localhost';
const devServerPort = '8080'; // 端口號(hào)
const devServerOpen = true; // 熱啟動(dòng)后自動(dòng)打開瀏覽器

module.exports = {

  // 配置生成dist里面static的cdn資源路徑（測(cè)試環(huán)境為./，正式環(huán)境走cdn路徑）
  publicPath: publicPath,

  // 輸出文件目錄（默認(rèn)dist）
  outputDir,

  // 配置放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄
  assetsDir,

  devServer: {
    host: devServerHost,
    port: devServerPort,
    open: devServerOpen, // 構(gòu)建完成自動(dòng)打開瀏覽器


    // eslint檢測(cè)影響代碼編譯，注釋調(diào)不會(huì)影響代碼編譯
    // overlay: {
    //   warnings: true,
    //   errors: true
    // }
  },
  lintOnSave: processEnv === 'development' ? true : false, // 開發(fā)環(huán)境開啟eslint，測(cè)試和線上編輯代碼禁止eslint

  // webpack 配置，鍵值對(duì)象時(shí)會(huì)合并配置，為方法時(shí)會(huì)改寫配置
  configureWebpack: config => {
    // 擴(kuò)展資源，不將部分資源js等打入包內(nèi)引用cdn資源
    let externals = {
      // 'swiper': 'Swiper',
    };
    config.externals = externals;

    //警告 webpack 的性能提示
    config.performance = {
      hints: isPro ? 'warning' : false, // 本地開發(fā)不顯示警告
      // 入口起點(diǎn)的最大體積
      maxEntrypointSize: 512000, // 500kib
      // 生成文件的最大體積
      maxAssetSize: 307200, // 300kib
      // 只給出 js 文件的性能提示
      assetFilter(assetFilename) {
        return assetFilename.endsWith('.js');
      }
    };
  },

  // webpack 鏈接 API，用于生成和修改 webapck 配置
  chainWebpack: (config) => {
    // 取消 chunks，每個(gè)頁(yè)面只對(duì)應(yīng)一個(gè)單獨(dú)的 JS / CSS
    config.optimization.splitChunks({
      cacheGroups: {}
    });

    // 全局配置node_modules中的模塊，使用時(shí)無(wú)需引入
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: "n-zepto",
      Zepto: "n-zepto",
      "window.Zepto": "n-zepto"
    }]);

    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, {
        limit: 10240, // 小于10k，壓縮圖片 => base64
        // limit: 3000,
        publicPath: imgPublicPath,
        name: `[name].[hash:8].[ext]`
      }))

    // 設(shè)置fonts字體文件引用的路徑
    config.module
      .rule('fonts')
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
      .use('url-loader')
      .loader('file-loader')
      .tap(options => Object.assign(options, {
        limit: 5000,
        publicPath: fontPublicPath,
        name: '[name].[hash:8].[ext]'
      }))


    // npm run report；打印app.js的模塊報(bào)告，查看各個(gè)模塊；
    if (processEnv === 'report') {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }

  },

  // css配置處理
  css: {
    // 是否使用css分離插件 ExtractTextPlugin；true：頁(yè)面css獨(dú)立分割，false：頁(yè)面css同一打包；
    extract: true,
    // 開啟 CSS source maps（默認(rèn)false）線上關(guān)閉，測(cè)試和本地開啟
    sourceMap: isPro ? false : true,
    // css預(yù)設(shè)器配置項(xiàng)
    loaderOptions: {
      sass: {
        // sass的公共方法和變量，需要預(yù)編譯；
        prependData: `
          @import "@/assets/css/global.scss";
          @import "@/assets/css/func.scss";
        `
      },
      postcss: {
        plugins: [
          // 瀏覽器自動(dòng)加前綴
          require('autoprefixer')({
            overrideBrowserslist: [
              "Android 4.0",
              "iOS 7",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
            ]
          }),
        ]
      }

    },
    // 啟用 CSS modules for all css / pre-processor files.
    requireModuleExtension: false
  },

  // 構(gòu)建時(shí)開啟多進(jìn)程處理 babel 編譯
  parallel: require('os').cpus().length > 1,

  pwa: {
    iconPaths: {
      favicon32: 'favicon.ico',
      favicon16: 'favicon.ico',
      appleTouchIcon: 'favicon.ico',
      maskIcon: 'favicon.ico',
      msTileImage: 'favicon.ico'
    },

  },

  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}