# carland **Repository Path**: zscnb/carland ## Basic Information - **Project Name**: carland - **Description**: 用tailwindcss,react,next ,framer motion 网址 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-08-19 - **Last Updated**: 2023-08-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). ## Getting Started First, run the development server: ```bash npm run dev # or yarn dev # or pnpm dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. ## 项目搭建过程 ```bash npx create-next-app@latest . npm i @headlessui/react date-fns framer-motion react-countup react-date-range react-icon s react-intersection-observer react-responsive react-scroll swiper ``` ## 打包 ```bash # package.json 写一个npm脚本 "scripts": { "export": "npm run build && next export", } # next.config.js const isProd = process.env.NODE_ENV === 'production' /** @type {import('next').NextConfig} */ const nextConfig = { distDir: 'out', output: 'export', // 设置 Next.js 的 basePath,指定项目的访问路径 basePath: isProd ? '/carland' : '', // 设置 Next.js 的 assetPrefix,指定静态资源的访问路径 assetPrefix: isProd ? '/carland/' : '', images: { unoptimized: true }//配置后缀名png,svg不影响 // 示例:所有静态资源地址: // } module.exports = nextConfig # jsconfig.json 配置访问路径 { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./src/*"] } } } ```