Nuxt2.x nuxt.config.js 配置

此配置基于 Nuxt2.x 版本

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    htmlAttrs: { // 自定义HTML模板时使用的 HTML_ATTRS HTML_ATTRS
      lang: 'zh-CN',
      amp: true
    },
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'keywords', content: 'keywords1,keywords2,keywords3' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    // 以link的方式使用外部资源文件
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://xxxxxx' }
    ],
    // 使用外部资源文件,自动生成 script 标签
    script: [
      { src: 'https://xxxxxx' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#f47e36' }, // 进行ajax请求时顶部进度条的颜色
  /*
  ** Global CSS
  */
  css: [ // 全局样式导入
    '@/assets/style/index.scss',
    'element-ui/lib/theme-chalk/index.css',
    { src: 'swiper/dist/css/swiper.css' }
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [ // 加载 plugins
    '@/plugins/element-ui',
    { src: '@/plugins/axios', mode: 'client' },
    { src: '@/plugins/components', mode: 'client' },
    { src: '@/plugins/vue-swiper', mode: 'client' },
    { src: '@/plugins/babel-polyfill', mode: 'client' }
  ],
  /*
  ** Nuxt.js dev-modules
  */
  devModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [ // nuxt 模块扩展
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // npm install @nuxtjs/proxy 用于nuxt解决跨域。
    '@nuxtjs/proxy',
    // npm i -D @nuxtjs/style-resources sass-loader node-sass
    '@nuxtjs/style-resources'
  ],
  styleResources: { // style 预处理器配置
    scss: [ // 此处用的预处理器是scss 加载css资源,一般用于加载全局变量之类
      '~assets/style/variables.scss',
      '~assets/style/amination.scss'
    ]
  },
  router: { // 全局路由配置
    middleware: ['auth'] // 添加路由中间件
  },
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
    proxy: true,
    prefix: '/api/',
    credentials: true
    // See https://github.com/nuxt-community/axios-module#options
  },
  proxy: {
    '/api/': {
      target: process.env.NODE_ENV !== 'production' ? 'http://localhost:9091' : 'https://www.xxx.com',
      pathRewrite: {
        '^/api/': '/',
        changeOrigin: true
      }
    }
  },
  /*
  ** Build configuration
  */
  build: {
    // 提取css到单独link文件
    extractCSS: true,
    transpile: [/^element-ui/],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      // Run ESLint on save
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        });
      }
    },
    optimization: { // 配置代码压缩规则
      minimizer: [
        // webpack4 使用的压缩插件,用来替代webpack3的 UglifyJsPlugin
        new TerserPlugin({
          terserOptions: {
            warnings: false,
            compress: {
              drop_console: true, // 可选:false,生产移除 console.log
              pure_funcs: ['console.log']
            },
            output: {
              // 是否保留代码注释
              comments: false
            },
            cache: true,
            parallel: true,
            // Must be set to true if using source-maps in production
            sourceMap: process.env.NODE_ENV !== 'production'
          }
        })
      ],
      splitChunks: { // 代码打包分割规则
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial' // only package third parties that are initially dependent
          },
          elementUI: {
            name: 'chunk-ui',
            priority: 20,
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/
          }
        }
      }
    },
    babel: { // babel相关配置
      'plugins': [ // element-ui 按需加载
        [
          'component',
          {
            'libraryName': 'element-ui',
            'styleLibraryName': 'theme-chalk'
          }
        ]
      ],
      'comments': true
    },
    publicPath: '/static/', // 配置打包的静态资源文件目录。可以是cdn地址
    filenames: { // 打包的文件名规则
      app: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
      chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
      css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css',
      img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[hash:7].[ext]',
      font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[hash:7].[ext]',
      video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[hash:7].[ext]'
    }
  }
};

除特别注明外,本站所有文章均为原创,转载请注明原文链接:https://www.myblogbo.com/article/25.html

 Top