关于 nuxtjs 项目开发的简单说明（分享）

1. 项目创建

官网戳这里

node >= v14.20.1

使用 yarn 创建项目
yarn create nuxt-app <项目名>

2. 项目目录结构

│   nuxt.config.js    ==> nuxt配置文件 
│   package.json	  
│   README.md
│   yarn.lock
├───.nuxt         	  ==> 打包后的文件
├───api				  ==> 接口，axios
│       request.js
├───assets		      ==> 自己的资源文件
├───components        ==> 组件，nuxt 中的组件不需要引入，可以直接使用
├───pages			  ==> 页面，nuxt 中的路由也不需要配置，会根据 pages 下的文件生成路由表
│   │   home.vue
│   │   index.vue
├───plugins		      ==> 插件比如三方库需要放在这里
├───static            ==> 资源文件
│   │   favicon.ico
└───store             ==> vuex-store 状态管理

3. nuxtjs 配置文件

// 当然有很多配置，这里只是一部分
export default {
  // head 中的配置在生成页面的时候会自动解析成标签 
  head: {
    title: "nuxtjs",
    htmlAttrs: {
      lang: "zh-CN",
    },
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        hid: "description",
        name: "description",
        content: "nuxtjs ssr",
      },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      // 自己的样式文件可以放在 static 下
      { rel: "stylesheet", href: "/style/normalize.css" },
    ],
  },

  // 全局的 css 样式，路径和vue项目导包一样
  // 也可以和下面的 plugins 一样，~ 默认就是根路径
  css: ["element-ui/lib/theme-chalk/index.css"],

  plugins: [{ src: "~plugins/elementUI" }],

  // 自动导入组件
  components: true,

  // 导入模块，这里使用了 axios、proxy
  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/proxy",
  ],

  // 使用代理
  axios: {
    proxy: true, // Can be also an object with default options
  },
  // 配置代理
  proxy: {
    "/api": {
      target: "https://xxx.com", // 允许跨域的服务器地址
      pathRewrite: {
        "^/api": "",
      },
    },
  },
};

4. 关于 asyncData 的一个小坑

// 开发起来就和写 vue 一样
// asyncData 和 data 差不多，都是可以返回数据供视图使用
export default {
  // 1. asyncData 限于页面组件
  // 2. 在 asyncData 中的接口是不能走代理的
  // 3. 在 async asyncData(){} 函数中我一用 await 就报错（官网上的列子），这一点我不知道为什么
  async asyncData(){
	return { }
  },
  data(){
	return { }
  }
}

5. 项目打包

// nuxt 默认配置了四个指令
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

// dev
开发时指令

// build
打包时指令，打包后不和 vue 一样就一个 dist 文件需要部署
而 nuxt 需要这些文件 nuxt.config.js、package.json、plugins、static、yarn.lock，把这些丢给后端就好了

// start
执行上面打包的文件

// generate
这个好像是生产源代码文件吧，我也没有用过