vue.config.js的常用配置

const path = require('path')
const glob = require('glob')
const resolve = (dir) => path.join(__dirname, dir)
const PAGES_PATH = './src/pages/*/*.js'

module.exports = {
 //  publicPath: '/test/',  // 設定部署應用包時的基本URL
  publicPath: process.env.NODE_ENV === 'production' ? '/test/' : './', // 開發環境與生產環境的區分
  //outputDir: 'testbuild', // 運行build 時生產的構建檔案的目錄，默認'dist'
  // assetsDir: 'assets', // build之后生成的靜態資源放置的目錄，默認''
  // indexPath: 'test/home.html', // build之后生成的index.html的路徑
  // filenameHashing: true, // build之后生成的靜態資源默認情況下加了hash值以控制靜態資源的快取，默認是true
  // pages: {
  //   index:{
  //     entry: 'src/pages/index/main.js', // page入口
  //     template: 'public/index.html', // public 里面的檔案
  //     filename: 'index.html', // build之后生成的檔案及路徑名
  //     title: 'Index Page',
  //     chunks: ['chunk-vendors', 'chunk-common', 'index']
  //   },
  //   page1:{
  //     entry: 'src/pages/page1/main.js', // page入口
  //     template: 'public/page1.html', // public里面的檔案
  //     filename: 'page1.html', // build之后生成的檔案及路徑名
  //     title: 'page1', // 使用此項時，// template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  //     chunks: ['chunk-vendors', 'chunk-common', 'page1'] // 提取出來的通用 chunk 和 vendor chunk
  //   },
  //   page2:{
  //     entry: 'src/pages/page2/main.js', // page入口
  //     template: 'public/page2.html',
  //     filename: 'page2.html', // build之后生成的檔案及路徑名
  //     title: 'Index Page',
  //     chunks: ['chunk-vendors', 'chunk-common', 'page2']
  //   }
  // },
  pages:setPages(),
  productionSourceMap: false, // 如果你不需要生產環境的 source map，可以將其設定為 false 以加速生產環境構建
  // devServer: {
  //   port: '1111',
  //   // proxy: 'http://localhost:8080'  //告訴開發服務器將任何未知請求 (沒有匹配到靜態檔案的請求) 代理到http://localhost:8080，
  //   proxy: {
  //     '/api': {
  //       //要訪問的跨域的域名
  //       target: 'http://localhost:8080',
  //       ws: true, // 是否啟用websockets
  //       secure:false, // 使用的是http協議則設定為false，https協議則設定為true
  //       changOrigin: true, //開啟代理：在本地會創建一個虛擬服務端，然后發送請求的資料，并同時接收請求的資料，這樣客戶端端和服務端進行資料的互動就不會有跨域問題
  //       pathRewrite: {
  //           '^/api': ''
  //       }
  //     }
  //   }
  // },
  chainWebpack: config => {
    /* 自動匯入公共檔案*/
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(
      type => addStyleResource(config.module.rule('scss').oneOf(type))
    )

    /* 添加別名*/
    config.resolve.alias
      .set('@title', resolve ('src/assets/commonPublic/title.vue'))
  }
}

/**
 * 注入公共樣式
 * @param rule
 */
function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, 'src/assets/common.scss') // resolve()回傳絕對路徑
      ]
    })
}

/**
 * 多頁面跳轉
 */
function setPages () {
  let pages = {}
  glob.sync(PAGES_PATH).forEach(filepath => {
    let fileList = filepath.split('/')
    let fileName = fileList[fileList.length - 2]

    pages[fileName] = {
      entry: filepath,
      template:`public/${fileName}.html` , // 'public/index.html'
      filename: `${fileName}.html`,
      // title:
      chunks: ['chunk-vendors', 'chunk-common', fileName]
    }
  })
  return pages
}

對應生成的dist檔案目錄及多頁面配置時的檔案目錄如下：

標籤：JavaScript

上一篇：textarea 換行處理

下一篇：TypeScript高級用法詳解