vue-cli3 vue.config.js配置

vue-cli3生成的項目比vue-cli2生成的項目目錄簡單不少,少了build與config文件夾，因此有的東西須要本身手動配置。

條件：

將npm更新至最新  node >=8.9

1.全局安裝 npm install -g @vue/cli 或 yarn global add @vue/cli

2.查看vue版本

3.在一個新文件夾下建立項目

 

 

在項目跟目錄下新建vue.config.js對vue-cli以及webpack能夠進行一些配置

const path = require('path')

module.exports = {  
  // 部署應用包時的基本 URL,用法和 webpack 自己的 output.publicPath 一致
  publicPath: './',  
  // 輸出文件目錄
  outputDir: 'dist',  
  // eslint-loader 是否在保存的時候檢查
  lintOnSave: true,  
  // 是否使用包含運行時編譯器的 Vue 構建版本
  runtimeCompiler: false,  
  // 生產環境是否生成 sourceMap 文件
  productionSourceMap: false,  
  // 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標籤上啓用 Subresource Integrity (SRI)
  integrity: false,  
  // webpack相關配置
  chainWebpack: (config) => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', path.resolve(__dirname, './src'))
  },
  configureWebpack: (config) => {    
  if (process.env.NODE_ENV === 'production') {      
      // 生產環境
      config.mode = 'production'
    } else {      
      // 開發環境
      config.mode = 'development'
    }
  },  
  // css相關配置
  css: {    
    // 是否分離css（插件ExtractTextPlugin）
    extract: true,    
    // 是否開啓 CSS source maps
    sourceMap: false,   
    // css預設器配置項
    loaderOptions: {},    
    // 是否啓用 CSS modules for all css / pre-processor files.
    modules: false
  },  
  // 是否使用 thread-loader
  parallel: require('os').cpus().length > 1, 
  // PWA 插件相關配置
  pwa: {}, 
  // webpack-dev-server 相關配置
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,   
    // http 代理配置
    proxy: {      
      '/api': {
        target: 'http://127.0.0.1:3000/api',
        changeOrigin: true,
        pathRewrite: {          
            '^/api': ''
        }
      }
    },
    before: (app) => {}
  }, 
  // 第三方插件配置
  pluginOptions: {

  }
}