vue-cli3.0構建專案後,vue.config.js配置簡介
阿新 • • 發佈:2018-12-21
vue-cli3.0建立專案
vue.config.js配置
vue-cli3.0構建專案目錄中沒有build和config目錄,新增自定義配置需要在專案跟目錄中新增vue.config.js,注意是跟目錄非src下。配置如下:
const path = require('path') const debug = process.env.NODE_ENV !== 'production' module.exports = { // 基本路徑 baseUrl: '/', // 輸出檔案目錄 outputDir: 'dist', assetsDir: 'assets', // 靜態資源目錄 (js, css, img, fonts) // eslint-loader 是否在儲存的時候檢查 lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only // compiler: false, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md webpack連結API,用於生成和修改webapck配置 chainWebpack: () => { if (debug) { // 本地開發配置 } else { // 生產開發配置 } }, configureWebpack: (config) => {// webpack配置,值位物件時會合並配置,為方法時會改寫配置 if (debug) { // 開發環境配置 config.devtool = 'cheap-module-eval-source-map' } else { // 生產環境配置 } Object.assign(config, { // 開發生產共同配置 resolve: { alias: { '@': path.resolve(__dirname, './src')//設定路徑別名 //... } } }) }, // vue-loader 配置項 // https://vue-loader.vuejs.org/en/options.html // vueLoader: {}, // 生產環境是否生成 sourceMap 檔案 productionSourceMap: true, // css相關配置 配置高於chainWebpack中關於css loader的配置 css: { // 是否使用css分離外掛 ExtractTextPlugin extract: true, // 開啟 CSS source maps?是否在構建樣式地圖,false將提高構建速度 sourceMap: false, // css預設器配置項 loaderOptions: {}, // 啟用 CSS modules for all css / pre-processor files. modules: false }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores 構建時開啟多程序處理babel編譯 parallel: require('os').cpus().length > 1, // 是否啟用dll // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode // dll: false, // PWA 外掛相關配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // webpack-dev-server 相關配置 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // 設定代理 before: app => {} }, // 第三方外掛配置 pluginOptions: { // ... } }