Nuxt3使用

news2025/1/16 6:02:20

1.官网下载

npx nuxi@latest init nuxt(有墙)，也可以到这个地方下载：git clone https://gitee.com/pmx600/nuxt3.git。

2.找到app.vue文件

将里面的代码修改为：<template><NuxtPage /></template>，NuxtPage 的作用相当于vue中的 <router-view/>。

3.同级新建pages目录

分别新建index.vue、login/index.vue、mine/index.vue，其中index.vue是进入此项目的默认文件，相当于vue的router.js中的path:'/'的路径。nuxt项目不需要自己配置路由，默认会把pages里面的换成路由。比如这里，你直接访问：http://192.168.100.87:3000，http://192.168.100.87:3000/login，http://192.168.100.87:3000/mine 即可

4.环境变量

在app.vue的同级目录下，新建.env、.env.local、.env.dev、env.prod，变量命名没用规则，建议统一用NUXT_PUBLIC_XXX的书写规范。

5.启动命令修改

修改package.json的启动命令，如本地启动，在scripts添加一行："local": "nuxt dev --dotenv .env.local"，那么启动后，就会去读取.env.local的配置。

6.获取环境变量的值

首先先去nuxt.config.ts，添加： runtimeConfig: { public: { baseUrl: process.env.NUXT_PUBLIC_BASE_URL, appId: process.env.NUXT_PUBLIC_APPID } },

假设我们在.env或者.env.local配置了NUXT_PUBLIC_BASE_URL = xxxx，NUXT_PUBLIC_APPID=xxx的两个环境变量。
获取变量的方法，调用nuxt提供的API: const config = useRuntimeConfig();console.log(config)就可以拿到对应的变量。

7.路由跳转

调用nuxt的api:navigateTo({ path: url },query: {id: 1})。

8.nuxt.config.ts常用配置：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    './assets/css/reset.css',
  ],
  app: {
    head: {
      title: 'Nuxt',
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover' }
      ],
      script: [
        // <script src="https://myawesome-lib.js"></script>
        // { src: 'https://awesome-lib.js' }
      ],
      link: [
        // <link rel="stylesheet" href="https://myawesome-lib.css">
        // { rel: 'stylesheet', href: '@/assets/reset.css' }
      ],
      // please note that this is an area that is likely to change
      style: [
        // <style type="text/css">:root { color: red }</style>
        // { children: ':root { color: red }', type: 'text/css' }
      ],
      noscript: [
        // <noscript>JavaScript is required</noscript>
        { children: 'JavaScript is required' }
      ]
    }
  },
  runtimeConfig: {
    // Keys within public are also exposed client-side
    public: {
      baseUrl: process.env.NUXT_PUBLIC_BASE_URL,
      appId: process.env.NUXT_PUBLIC_APPID
    }
  },
  modules: ['@vant/nuxt'],
  devtools: { enabled: false },
  postcss: {
    plugins: {
      // 这个工具可以实现自动添加CSS3前缀
      "autoprefixer": {
        overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]
      },
      'postcss-pxtorem': {
        rootValue: 37.5, // 指定转换倍率，我现在设置这个表示1rem=37.5px;
        propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
        mediaQuery: false, // 是否允许使用媒体查询，false媒体查询的代码可用，true不可用
        exclude: 'ignore',
        replace: true, // 替换包含rem的规则，而不是添加回退
        minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
        unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
        // selectorBalckList: ["van"], // 匹配不被转换为rem的选择器
      },
    }
  },
  alias: {
    "~": "/<rootDir>",
    "@": "/<rootDir>",
    "~~": "/<rootDir>",
    "@@": "/<rootDir>",
    // "assets": "/<rootDir>/assets",
    "public": "/<rootDir>/public"
  }
})

9.plugins

相当于在vue项目，在main.js引入xxx.js。比如在移动端做适配，引入lib-flexible.js。如果我们在vue的项目，直接在main.js: import ('@/utils/lib-flexible.js')，在nuxt项目中，我们只需要按照以下格式，即可自动引入：

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(() => {
  if (process.client) {
    (function flexible(window, document) {
      var docEl = document.documentElement
      var dpr = window.devicePixelRatio || 1
  
      // adjust body font size
      function setBodyFontSize() {
          if (document.body) {
              document.body.style.fontSize = (12 * dpr) + 'px'
          }
          else {
              document.addEventListener('DOMContentLoaded', setBodyFontSize)
          }
      }
      setBodyFontSize();
  
      // set 1rem = viewWidth / 10
      function setRemUnit() {
          var rem = docEl.clientWidth / 10
          docEl.style.fontSize = rem + 'px'
      }
  
      setRemUnit()
  
      // reset rem unit on page resize
      window.addEventListener('resize', setRemUnit)
      window.addEventListener('pageshow', function (e) {
          if (e.persisted) {
              setRemUnit()
          }
      })
  
      // detect 0.5px supports
      if (dpr >= 2) {
          var fakeBody = document.createElement('body')
          var testElement = document.createElement('div')
          testElement.style.border = '.5px solid transparent'
          fakeBody.appendChild(testElement)
          docEl.appendChild(fakeBody)
          if (testElement.offsetHeight === 1) {
              docEl.classList.add('hairlines')
          }
          docEl.removeChild(fakeBody)
      }
  }(window, document))
  }
})

10.部署问题

默认的packge.json文件中的scripts里面，有默认的：“build”: “nuxt build”,我们需要修改：

"build": "nuxt build --dotenv .env.prod && node .output/server/index.mjs",

执行完 npm run build，打包输出.output，里面是没用index.html，因为这个是服务端渲染原理，就相当于是一个node.js的后端项目，而.output/server/index.mjs是我们要启动的文件，用过node.js开发的童鞋肯定知道的，这个地方就是相当于node.js启动的app.js或者index.js，所以需要我们使用node把项目启动。