vue.config.js和nuxt.config.js配置示例

川长思鸟来 2021-06-26 16:06 1284阅读 0赞

## vue.config.js ##

module.exports = { 
      // Project deployment base
      // By default we assume your app will be deployed at the root of a domain,
      // e.g. https://www.my-app.com/
      // If your app is deployed at a sub-path, you will need to specify that
      // sub-path here. For example, if your app is deployed at
      // https://www.foobar.com/my-app/
      // then change this to '/my-app/'
    
      // EXAMPLE
      // https://www.example.com/project/v1.1/index.html
      // baseUrl becomes /project/v1.1/
    
      baseUrl: '/project/v1.1/',
    
     // baseUrl: process.env.NODE_ENV === 'production' ? '/your/dir/' : '/'
    
      // where to output built files
      outputDir: 'dist',
    
      // where to put static assets (js/css/img/font/...)
      assetsDir: 'assets',
    
      // whether to use eslint-loader for lint on save.
      // valid values: true | false | 'error'
      // when set to 'error', lint errors will cause compilation to fail.
      lintOnSave: true,
    
      // use the full build with in-browser compiler?
      // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
      runtimeCompiler: false,
    
      // babel-loader skips `node_modules` deps by default.
      // explicitly transpile a dependency with this option.
      transpileDependencies: [/* string or regex */],
    
      // generate sourceMap for production build?
      productionSourceMap: false,
    
      // tweak internal webpack configuration.
      // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
      chainWebpack: () => { },
      configureWebpack: () => { },
    
      // CSS related options
      css: { 
        // extract CSS in components into a single CSS file (only in production)
        // can also be an object of options to pass to extract-text-webpack-plugin
        extract: true,
    
        // Enable CSS modules for all css / pre-processor files.
        // This option does not affect *.vue files.
        // modules: false,
    
        // enable CSS source maps?
        sourceMap: false,
    
        // pass custom options to pre-processor loaders. e.g. to pass options to
        // sass-loader, use { sass: { ... } }
        loaderOptions: { }
      },
    
      // use thread-loader for babel & TS in production build
      // enabled by default if the machine has more than 1 cores
      parallel: require("os").cpus().length > 1,
    
      // options for the PWA plugin.
      // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    
      // configure webpack-dev-server behavior
      devServer: { 
        open: process.platform === "darwin",
        host: "0.0.0.0",
        port: 8088,
        https: false,
        hotOnly: false,
        compress: true
        // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
      },
    
      // options for 3rd party plugins
      pluginOptions: { 
        // ...
      }
    };

--------------------

module.exports = { 
      /* vue-cli3 项目配置文件 */
    
      /* 基本路径 默认情况下，我们假设您的应用程序将部署在域的根上 例如：https://www.my-app.com/ 如果应用程序部署在子路径上，则需要指定 这里的子路径，例如，如果应用程序部署在 https://www.foobar.com/my-app/ 然后把这个变成 '/my-app/' 例如：https://www.example.com/project/v1.1/index.html baseUrl 为 /project/v1.1/ baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/' */
      baseUrl: '/',
    
      // 输出文件目录
      // 在npm run build时 生成文件的目录 type:string, default:'dist'
      outputDir: 'dist',
    
      /* 构建多页时使用 index: { // 入口 entry: 'src/index/main.js', // 模板 template: 'public/index.html', // output as dist/index.html filename: 'index.html' } */
      pages: {  type: Object, Default: undefined },
    
      // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下
      // 网络请求的静态目录为 public 不参与打包 请求地址 ./ 直接指向 public 目录
      assetsDir: 'assets',
    
      // 指定生成的 index.html 的输出路径 (打包之后，改变系统默认的index.html的文件名)
      indexPath: 'index.html',
    
      /* 如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置 lintOnSave: process.env.NODE_ENV !== 'production eslint-loader eslint检查,是否在保存的时候检查 lintOnSave：{ type:Boolean default:true } 问你是否使用eslint */
      lintOnSave: true,
    
      // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
      filenameHashing: false,
    
      /* 使用编译器生成全在浏览器 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false) https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only */
      runtimeCompiler: false,
    
      /* babel-loader在默认情况下跳过`node_modules`模块 显式地使用此选项来转换依赖项 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来 */
      transpileDependencies: [ /* string or regex */ ],
    
      // 生产环境是否生成 sourceMap 文件
      productionSourceMap: false,
    
      /* 调整内部webpack配置 see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => { // 修改它的选项... return options }) }, */
      chainWebpack: () => { },
    
      /* configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... } else { // 为开发环境修改配置... } } */
      configureWebpack: () => { },
    
      // css相关配置
      css: { 
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: { },
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
      },
    
      // 在生产中使用Babel＆TS thread-loader
      // 默认情况下，如果机器有超过1个内核
      parallel: require('os').cpus().length > 1,
    
      // PWA（渐进式WEB应用） 插件相关配置 https://segmentfault.com/a/1190000012353473
      // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
      pwa: { },
    
      // 它支持webPack-dev-server的所有选项
      // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
      devServer: { 
        // 主机名
        host: process.env.HOST || 'localhost',
        // 端口号
        port: process.env.PORT || 8080,
        // 是否支持https安全访问
        https: false,
        // 配置自动启动浏览器 process.platform === 'darwin'
        open: true,
        // 热更新（webpack已实现了，这里false即可）
        hotOnly: false,
        compress: true,
        /* 配置跨域处理,只有一个代理 proxy: 'http://localhost:4000' 配置多个代理 { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } } */
        proxy: null,
        // 请求之前
        before: app => { }
      },
      // 第三方插件配置
      pluginOptions: { 
        // ...
      }
    }

--------------------

## nuxt.config.js ##

const pkg = require('./package')
    const shrinkRay = require('shrink-ray-current')
    
    module.exports = { 
      mode: 'universal',
    
      env: { 
        baseUrl: process.env.BASE_URL || 'http://localhost:3000'
      },
    
      render: { 
        http2: { 
          push: true
        },
        compressor: shrinkRay() // brotli compression
      },
    
      /* ** Headers of the page */
      head: { 
        title: pkg.name,
        meta: [
          {  charset: 'utf-8' },
          {  name: 'viewport', content: 'width=device-width, initial-scale=1' },
          {  hid: 'description', name: 'description', content: pkg.description }
        ],
        link: [{  rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
      },
    
      /* ** Customize the progress-bar color */
      loading: {  color: '#fff' },
    
      /* ** Global CSS */
      css: ['element-ui/lib/theme-chalk/index.css'],
    
      /* ** Plugins to load before mounting the App */
      plugins: ['@/plugins/element-ui'],
    
      /* ** Nuxt.js modules */
      modules: [
        // Doc: https://github.com/nuxt-community/axios-module#usage
        '@nuxtjs/axios',
        '@nuxtjs/style-resources'
      ],
      // 为全局提供scss变量
      styleResources: { 
        scss: '~/assets/scss/variable.scss'
      },
      /* ** Axios module configuration */
      axios: { 
        // See https://github.com/nuxt-community/axios-module#options
      },
    
      /* ** Build configuration */
      build: { 
        // https://zh.nuxtjs.org/api/configuration-build#analyze
        analyze: { 
          analyzeMode: 'static'
        },
    
        babel: { 
          plugins: [
            [
              'component',
              {  libraryName: 'element-ui', styleLibraryName: 'theme-chalk' }
            ]
          ]
        },
    
        /* ** You can extend webpack config here */
        extend(config, ctx) { }
      }
    }

--------------------

# `Vue CLi3` 修改`webpack`配置 #

## 审查项目的 webpack 配置 ##

因为 `@vue/cli-service` 对 webpack 配置进行了抽象，当你想查看webpack的配置时可以使用 `inspect`命令：

vue inspect # 在终端打印 webpack配置信息

vue inspect > output.js # 把webpack配置信息生成到output.js文件

注意，`output.js` 文件不是一个有效的 webpack 配置文件，仅用于审查。

## 修改webpack配置 ##

以**修改路径别名**为例：

1.  项目根目录创建文件 `vue.config.js`
2.  参考如下代码修改路径别名：

// vue.config.js
    const path = require('path')
    const resolve = dir => path.resolve(__dirname, dir)
    module.exports = { 
      chainWebpack: config => { 
        config.resolve.alias
          .set('styles', resolve('src/assets/styles'))
      }
    }

## 参考 ##

*  [官方文档][Link 1]
 *  [官方 vue.config.js 参数说明][vue.config.js]
 *  [vue.config.js 设置接口代理示例][vue.config.js 1]
 *  配置示例：

const path = require('path')
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    const ProxyAgent = require('proxy-agent')
    const resolve = dir => path.resolve(__dirname, dir)
    module.exports = { 
      outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
      runtimeCompiler: true,
      assetsDir: 'static',
      productionSourceMap: false, // 生产环境的 source map
      parallel: require('os').cpus().length > 1,
      configureWebpack: config => { 
        // 公共配置
        // cdn引用时配置externals 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
        config.externals = { 
          'vue': 'Vue',
          'vue-router': 'VueRouter',
          'element-ui': 'ELEMENT',
          'vuex': 'Vuex',
          'axios': 'axios'
        }
        config.resolve.alias = Object.assign({ }, config.resolve.alias, { 
          'src': resolve('src/common'),
          'common': resolve('src/views/common'),
          'static': resolve('static')
        })
        if (process.env.NODE_ENV === 'production') { 
          // 为生产环境修改配置...
          config.optimization = { 
            minimizer: [
              new UglifyJsPlugin({ 
                uglifyOptions: { 
                  compress: { 
                    drop_console: true, // console
                    drop_debugger: false,
                    pure_funcs: ['console.log']// 移除console
                  }
                }
              })
            ]
          }
        } else { 
          // 为开发环境修改配置...
        }
      },
      css: { 
        loaderOptions: { 
          css: { 
            importLoaders: 1 // @import 引入的文件可被一个loader处理 （2 可被两个loader处理）
          }
        }
      },
      devServer: { 
        port: 80,
        disableHostCheck: true, // 可使用本地host配置的域名访问
        proxy: { 
          '/api': { 
            agent: new ProxyAgent('http://132.128.11.12'),
            target: 'http://132.128.11.12',
            ws: false,
            changeOrigin: true
          }
        }
      }
    }

[Link 1]: https://cli.vuejs.org/zh/guide/webpack.html
[vue.config.js]: https://cli.vuejs.org/zh/config/#vue-config-js
[vue.config.js 1]: https://github.com/ustbhuangyi/vue-music/blob/master/vue.config.js