nuxt.js实战总结

一.项目初始化

• 1.先建一个空目录，再执行npx create-nuxt-app <项目名>。注意切换node版本，这里我用的是18，nvm use 18

• 2.需要先执行build,再执行start.否则会报错

原因:详见官网对命令的介绍。www.nuxtjs.cn/guide/comma…

开发模式
npm run dev

生产模式
npm run build 
npm run start

二.路由跳转

• 1.如何跳转链接，vant组件库中可以这样使用

• 2.Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。要在页面之间使用路由，我们建议使用<nuxt-link> 标签。 eg.

<template>
  <nuxt-link to="/">首页</nuxt-link>
</template>

详细可参考[www.nuxtjs.cn/guide/routi…

三.如何热更新

开发环境自动热更新

四.如何在项目中使用scss

npm run dev时报错

解决方法 包降级后重新npm update

  "node-sass": "^6.0.1",

 "sass-loader": "^10.1.1",

成功啦！

样式也生效啦！

五.css配置

六.环境变量配置

借助nuxt模块@nuxtjs/dotenv,使用方法

• 1.安装依赖

npm i @nuxtjs/dotenv

• 2.在nuxt.config.js的modules中添加模块，如下

  modules: ['@nuxtjs/style-resources','@nuxtjs/axios','@nuxtjs/dotenv'],

• 3.在nuxt.config.js中添加属性publicRuntimeConfig，该属性中配置的值会被暴露在前端，如下

  publicRuntimeConfig: {
    baseURL:process.env.BASE_URL || 'https://v2.nuxt.com'
  },

模板中可以通过$config读取到publicRuntimeConfig中配置的变量，如下

   <van-cell>环境变量---{{$config.baseURL}}</van-cell>

script中可以通过this.$config读取到publicRuntimeConfig中配置的变量，如下

  methods: {
    // TODO:解构是没值的，（看文档应该是配置了env属性），直接this.$config可以
    async handleFetch({$config }) {
      console.log('this.$config---',this.$config)
      console.log('$config---',$config)
      const res = await this.$axios.get("/user");
      console.log("res---", res);
    },
  },

• 4.在项目根目录下创建文件如： .env.development 开发环境下读取的环境变量

BASE_URL=https://dev-v2.nuxt.com
BASE=/dev/
DIR=dist

.env.pro 生产环境下读取的环境变量

BASE_URL=https://v2.nuxt.com
BASE=/
DIR=dist

• 5.修改package.json中的scripts配置，如下

  "scripts": {
    "start-dev": "nuxt --dotenv .env.development",
    "build-dev": "nuxt build --dotenv .env.development",
    "dev": "nuxt generate --dotenv .env.development &&  tar -cvf  dist.tar dist",

    "build-pro": "nuxt build --dotenv .env.pro",
    "build": "nuxt generate --dotenv .env.pro",
    "start": "nuxt start"
  },

通过上述配置，就可以执行相关命令读取到对应的环境变量啦~

• 开发环境
  • npm run start-dev
• 生成环境
  • npm run build（打包）
  • npm run start（将打包后的产物运行在服务器上，类似在dist目录下执行http-serve)

注意：如果要通过command在运行时获取环境变量，项目目录中不要写.env文件。因为会默认读取.env文件中的内容，导致设置的环境变量不生效。

上述配置参开文章如下，并且实操有效！

博客

github

tutorials

七.axios请求怎么用

使用的是@nuxtjs/axio  axios.nuxtjs.org/usage

plugin/axios.js中可以配置响应拦截和请求拦截以及错误处理,代码示例：

import { Toast } from 'vant';

// https://axios.nuxtjs.org/extend
export default function ({ $axios ,redirect }) {
  // 后端接口地址
   $axios.defaults.baseURL = process.env.BASE_URL

  // Request拦截器：设置Token
  $axios.onRequest((config) => {
    console.log('请求拦截---',config)
    // 使用Vuex存储Token，并做持久化处理
    config.headers['Authorization'] = "Bearer" + localStorage.getItem("token")
  })

  $axios.onResponse((response)=>{
      console.log('响应拦截---',response)

  })
  // Error拦截器：出现错误的时候被调用，根据状态码做对应判断并显示全局Message
  $axios.onError((error) => {
    const code = parseInt(error.response && error.response.status)
    switch (code) {
      case 400:
        Toast.fail('请求错误')
        break;
      // 未登录
      case 401:
        Toast.fail("Token过期")
        localStorage.clear();
        break;
      case 403:
        Toast.fail('拒绝访问')
        break;
      case 404:
        Toast.fail(`请求地址出错: ${error.response.config.url}`)
        break;
      case 408:
        Toast.fail('请求超时')
        break;
      case 500:
        Toast.fail('服务器内部错误')
        break;
      case 501:
        Toast.fail('服务未实现')
        break;
      case 502:
        Toast.fail('网关错误')
        break;
      case 503:
        Toast.fail('服务不可用')
        break;
      case 504:
        Toast.fail('网关超时')
        break;
      case 505:
        Toast.fail('HTTP版本不受支持')
        break;
      default:
        break;
    }
  })
}

八.mock配置

mock.js,添加在plugins中,代码示例：

const Mock = require('mockjs');
Mock.mock(/\/user/, 'get', () => {return {'list|1-10': [{'id|+1': 1}]}})

页面中使用

  methods: {
    async handleFetch() {
      const res = await this.$axios.get("/user");
      console.log("res---", res);
    },
  },

结果报错：

解决： MockXMLHttpRequest.prototype.upload = createNativeXMLHttpRequest().upload

发现了一个非常好的地方，就是改了nuxt.config.js中的东西不需要重启也会生效哦！

九.plugins该怎么配置

plugins目录中的文件都需要再nuxt.config.js中添加配置，如下：

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/vant',
    '@/plugins/mock',
    {
     src: '~/plugins/axios',
     mode: 'client' // 设置 这个插件就是在客户端渲染时，才会触发
    }
  ],