Nuxt + Typescript最佳实践4：常用配置

nuxt常用配置在根目录的nuxt.config.js文件

配置格式类似于webpack.config.js的配置

如何配置全局的head信息？

这里会利用到head配置

{
 mode: 'universal', // 可选'spa',不需要服务端渲染，'universal'，spa+服务端渲染
 head: {
        title: 'title名', // 网页名称
        htmlAttrs: {
            lang: 'zh-CN'  // 配置html 标签上的信息
        },
        meta: [  // 配置meta信息
            {charset: 'utf-8'},  
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1.0,user-scalable=no'
            },
            {
                hid: 'description',
                name: 'description',
                content: process.env.npm_package_description || ''
            }
        ],
        link: [ // 配置link信息
            {
                rel: 'icon',
                type: 'image/x-icon',
                href: '/favicon.ico'
            },
            {
                rel: 'stylesheet',
                href: `/css/reset.css`  
            }
        ],
        script: [ // 配置script信息
            {src: '/js/fontSize.js'},
            {src: `/js/jweixin-1.4.0.js`}
        ]
},
css: [  /* 全局引入css，将会被放到html的 link标签里， 注意:可能需要相关的loader，比如scss文件需要安装node-sass 和 sass-loader */
 // 直接加载一个 Node.js 模块。（在这里它是一个 Sass 文件）
    'bulma',
    // 项目里要用的 CSS 文件
    '@/assets/css/main.css',
    // 项目里要使用的 SCSS 文件
    '@/assets/css/main.scss'
],
hooks: {
    build: {
      done (builder) {
          // 生命周期钩子函数
      }
    }
},
modules: [ // 加载的模块，按顺序加载
    // 直接使用依赖包
    '@nuxtjs/axios',

    // 直接使用项目里面的文件
    '~/modules/awesome.js',

    // 接入一下配置
    ['@nuxtjs/google-analytics', { ua: 'X1234567' }],

    // 内联函数，可以自定义
    function () { }
]，
modulesDir: ['../../node_modules']， // 自定义模块解析目录
plugins: [
    '~plugins/vue-notifications'
]，  //插件，配置的所有插件会在 Nuxt.js 应用初始化之前被加载导入
//未完待续
}

配置最上方loadingbar的颜色

{
    // 如果你不想要loading，可以配置成 loading: false
    loading: {color: '#fff'},
}

配置模块

modules: [
      '@nuxtjs/axios', //  使用nuxt
      '@nuxtjs/style-resources'  // 用来样式提前加载
],
// 使用@nuxtjs/style-resources之后可以配置此项，将文件提前加载，类似于vue.config.js里面的的
//
//  css: {
//        loaderOptions: {
//            sass: {
//                prependData: 'xx.scss";'
//            }
//        }
// },
styleResources: {
     scss: [
         '@/assets/style/variables.scss',
         '@/assets/style/helper.scss'
     ]
},

抽离css到文件

build: {
    extractCSS: { 
        allChunks: true 
    }
}

加入路径别名

build: {
 extend: (config, ctx)=> {
      config.resolve = merge(config.resolve, {
           alias: { 
               '@common': path.resolve(__dirname, './../common')
            }
      });
 }
}

使用webpack插件

build: {
 // 使用DefinePlugin
  plugins: [new webpack.DefinePlugin({
      CONST_CQUOTE_WS_PATH: JSON.stringify(`${process.env.CQUOTE_WS_PATH}`) // ws地址
    }) ]
}

使用babel

build: {
  babel: {
    presets({isServer}) {
      const targets = isServer ? {node: '10'} : {ie: '11'}; // 兼容到ie11
        return [ [require.resolve('@nuxt/babel-preset-app'),  { targets}]];
      }
    }
}

使用postcss

build: {
 postcss: {
      plugins: {
        'postcss-px2rem': {
            remUnit: 100,
            propList: ['*']
        }
      },
      preset: {
        autoprefixer: true
      }
    }
}

开启http代理

axios: {
  proxy: true, // 表示开启代理
  prefix: '/api', // 表示给请求url加个前缀 /api
  credentials: true // 表示跨域请求时是否需要使用凭证
},
.proxy = {
  '/api': {
    target: process.env.API_PATH || '', // 目标接口域名
    changeOrigin: true,
    pathRewrite: {
       '^/api': '' // 把 /api 替换成‘’
    }
  }
}

最后编辑于：2020.05.25 21:16:53