Nuxt框架基础配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了Nuxt框架基础配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、创建Nuxt项目

确保安装了npx（npx 在 npm 版本 5.2.0 默认安装了）：

npx create-nuxt-app <项目名>

或者使用yarn：

yarn create nuxt-app <项目名>

在创建项目时，会让你进行一些配置的选择，可参考文档：运行create-nuxt-app

默认别名设置
~ 或 @ srcDir
~~ 或 @@ rootDir
默认情况下，srcDir 和 rootDir 相同。

二、nuxt.config.js配置

该文件是Nuxt框架的主要配置文件，其大多数配置都可以在这里进行配置。这里将依次介绍各个模块中可以配置哪一些属性：

head
这里可以配置Html中head中的大多数标签，如 title、meta(主要)、link(系统的icon)、script(引入的初始化js，如rem的初始化大小设置)

head: {
    title: '学习nuxt框架',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      {
        src: '/flexible/flexible.js',
        type: 'text/javascript',
        charset: 'utf-8',
      },
    ],
  },

css
这里配置的是全局的 CSS 文件（每一个页面都会引入，如初始化css文件，UI库的重置）
如果要使用 sass 就必须要安装 node-sass 和 sass-loader

npm install --save-dev node-sass sass-loader

预处理器安装后，Nuxt.js 会自动识别被导入文件的扩展名，之后，webpack 会使用相应的预处理器进行处理。前提是，你安装了对应预处理器。

css: [    
    // 重置 css 样式
    '@/assets/css/reset.css',
    // 项目里要使用的 SCSS 文件 或 重置UI库的样式
    '@/assets/css/main.scss'
  ]

plugins
该配置项用于配置那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。即相当于在main.js引入并全局化的一些插件或者js。

这里配置的插件都必须放置在plugins目录下

该值类型为对象数组（如果只配置一个，可为字符串即文件的路径），每一个配置都是一个对象，并都具有以下属性：

src：String （文件的路径）
ssr：Boolean （默认为 true），如果设置为false，该文件只会在客户端被打包。

plugins: [
    { src: '@/plugins/vant', ssr: true },
    { src: '@/plugins/api', ssr: true },
    { src: '@/plugins/commonFuc', ssr: true },
    { src: '@/plugins/axios', ssr: false },
    { src: '@/plugins/router', ssr: false },
    { src: '@/plugins/vue-swiper', ssr: false },
  	{ src: '@/plugins/filter', ssr: false },    
  ],

注意：这里除了配置一些公用的js外，每次你需要使用 Vue.use() 时，你需要在 plugins/ 目录下创建相应的插件文件，并在 nuxt.config.js 中的 plugins 配置项中配置插件的路径。

modules
该配置项允许您将 Nuxt 模块添加到项目中。modules 是 Nuxt.js 扩展，可以扩展它的核心功能并添加无限的集成。

Nuxt.js 团队提供官方模块:

@nuxt/http: 基于ky-universal的轻量级和通用的 HTTP 请求
@nuxtjs/axios: 安全和使用简单 Axios 与 Nuxt.js 集成用来请求 HTTP
@nuxtjs/pwa: 使用经过严格测试，更新且稳定的 PWA 解决方案来增强 Nuxt
@nuxtjs/auth: Nuxt.js 的身份验证模块，提供不同的方案和验证策略
Nuxt.js 社区制作的模块列表可在 https://github.com/topics/nuxt-module 中查询

modules: [
    // Using package name
    '@nuxtjs/axios',

    // Relative to your project srcDir, 相对于您的项目srcDir
    '~/modules/awesome.js',

    // Providing options, 传入参数
    ['@nuxtjs/google-analytics', { ua: 'X1234567' }],

    // Inline definition，直接内部定义
    function () {}
  ]

注意：某一些模块的配置可以写在modules配置外，配置详情请参考模块的官方文档。如：

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
  ],
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
          logout: { url: '/api/auth/logout', method: 'post' },
          user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
        },
        tokenType: ''
      },
    },
    fullPathRedirect: true,
    watchLoggedIn: false,
  },
  axios: {
    proxy: true,		// 开启了代理，需要配置。也可在这里直接配置一个对象
    credentials: true
  },
  proxy: {	// 配置代理    
    '/api': {
      target: 'http://api.example.com', // api
      pathRewrite: {
        '^/api': '',
      },
      changeOrigin: true,
      logLevel: 'debug'
    },
  },

router
该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置。让你可以个性化配置 Nuxt.js 应用的路由。该配置有以下常用属性：

base：应用的根 URL。举个例子，如果整个单页面应用的所有资源可以通过 /app/ 来访问，那么 base 配置项的值需要设置为 ‘/app/’。
extendRoutes：扩展Nuxt.js创建的路由。您可以通过extendRoutes选项执行此操作。Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。而像404页面可能就需要我们在这两扩展一下。

router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }

linkActiveClass：全局配置 <nuxt-link> 组件默认的激活类名。
linkExactActiveClass：全局配置 <nuxt-link> 默认的 active class。
scrollBehavior：个性化配置跳转至目标页面后的页面滚动位置。每次页面渲染后都会调用 scrollBehavior 配置的方法。如：

router: {
    scrollBehavior(to, from, savedPosition) {
      let position:any = false
      if (
        to.matched.length < 2 &&
        to.matched.every(r => r.components.default.options.scrollToTop !== false)
      ) {
        position = { x: 0, y: 0 }
      } else if (to.matched.some(r => r.components.default.options.scrollToTop)) {
        position = { x: 0, y: 0 }
      }
      if (savedPosition) {
        position = savedPosition
      }
      return new Promise((resolve) => {
        ;(window as any).$nuxt.$once('triggerScroll', () => {
          resolve(position)
        })
      })
      // return { x: 0, y: 0 }		// 配置所有页面渲染后滚动至顶部
    },
}