nuxt项目配置

1.在nuxt.config.js文件中配置

1.1.build的配置

// 通过执行命令nuxt build --analyze来启用查看编译构建结果

build: {
     analyze: true
},



// 为 JS 和 Vue 文件设定自定义的 babel 配置。

babel: {
      babelrc: false,
      cacheDirectory: undefined,
      presets: ['@nuxt/babel-preset-app']
},

1.2.css的配置

// nuxt在这里配置全局的css样式，配置的样式文件默认的会在所有的页面引入。

1.先安装    npm install --save-dev node-sass sass-loader


2.在nuxt.config.js文件中配置全局样式文件

css: [
     // 项目里要用的 CSS 文件
     '~assets/css/main.css',

     // 项目里要使用的 less 文件
     '~~assets/css/main.scss'
],

1.3.head的配置

// 可以在head标签里面配置一些自定义的meta标签，和style样式文件
head: {
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' }
        ],
        link: [
          { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
        ]
}

1.4.loading配置

// 可以使用nuxt内置的加载进度条，也可以自定义样式。

// 在组件中可以使用this.$nuxt.$loading.start()来开启进度条，通过this.$nuxt.$loading.finish()来关闭进度条，
// 为了确保进度条运行没有问题，一个把它放在this.$nextTick(() => {}中执行

mounted () {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
}



// 页面切换的时候如果不想要进度条的话在nuxt.config.js中配置

module.exports = {
  loading: false
}

进度条样式的配置

自定义加载组件：我们可以在components目录下创建自己定义的进度条组件

// 在nuxt.config.js中配置路径
module.exports = {
  loading: '~/components/loading.vue'
}

进度条时长问题

// 进度条进度的时间无法确定设置 duration 来部分解决这个问题，您可以预估需要多长时间完成。

// 您可以通过将continuous设置为true来更改默认行为，然后在达到100%后，进度条将在duration时间内再次收缩回0%。

// 当达到0%后仍未完成加载时，它将再次从0%开始增长到100%，这将重复直到加载完成。

更多的配置请查看nuxt的api部分

nuxt的配置

nuxt项目配置

猜你喜欢