Next项目路径怎么添加指定的访问前缀

这篇文章主要讲解了“Next项目路径怎么添加指定的访问前缀”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Next项目路径怎么添加指定的访问前缀”吧！

更改项目前缀

假设我们添加的前缀为

/jimmy01/

更改页面访问前缀

准确的来说，这一步更改的是项目资源的访问前缀，不仅仅是页面的前缀。这一步骤，我们统一设置一个变量，然后引用资源。

统一设置的这个变量，在

next.config.js

文件中：

function getBasePath() {
  return '/jimmy01'
}
module.exports = {
  reactStrictMode: true,
  basePath: getBasePath(), // 添加前缀
  webpack(webpackConfig) {
    webpackConfig.output.publicPath =
      getBasePath() + webpackConfig.output.publicPath; //资源生成前缀
    return webpackConfig;
  },
  publicRuntimeConfig: {
    basePath: getBasePath(), //写入路径
  },
}

然后，我们在组件中引用，比如

Foot.js

公共组件：

import { useRef, useEffect } from 'react';
import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();
const Foot = () => {
  const refToComponentFoot = useRef(null);
  useEffect(() => {
    async function animate() {
      if(refToComponentFoot.current) {
        const ScrollReveal = (await import("scrollreveal")).default; // 动态引入
        ScrollReveal().reveal(refToComponentFoot.current, { delay: 200 });
      }
    }
    animate();
  }, [])
  return (
    <footer className="text-sm" ref={ refToComponentFoot }>
      <div className="bg-gray-300">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 sm:py-6 lg:py-8">
          <div className="flex flex-col sm:flex-row justify-between items-center justify-start md:space-x-10">
            <div className="flex justify-start items-center lg:w-0 lg:flex-1 text-sm text-gray-500">
              <a href="https://www.19jp.com">

也就是引入变量，然后访问，上面代码的访问资源地址比如："{

${publicRuntimeConfig.basePath}/footer/footer_medical.svg

}"。

部署项目

项目开发完成之后，执行打包命令行

npm run build

生成一份构建后的压缩文件夹

out

，将其更名为

jimmy01

，即

out -> jimmy01

。我们将其上传服务器指定的路径，然后用

nginx

进行代理。

这里我们更改

nginx.config

中的

server

字段：

server {
  listen 80 default_server;
  root /usr/share/nginx/fe/; // 打包的文件存放的位置
  location / {
    index index.html;
    if (!-e $request_filename){
      rewrite ^(.*)$ /$1.html break;
      break;
    }
  }
}

执行

nginx -s reload

使得配置生效。通过

http://domain.com/jimmy01/index.html

即可访问。

以上就是Next项目路径怎么添加指定的访问前缀的详细内容，更多关于Next项目路径怎么添加指定的访问前缀的资料请关注九品源码其它相关文章！