Next項(xiàng)目路徑怎么添加指定的訪(fǎng)問(wèn)前綴

這篇文章主要講解了“Next項(xiàng)目路徑怎么添加指定的訪(fǎng)問(wèn)前綴”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Next項(xiàng)目路徑怎么添加指定的訪(fǎng)問(wèn)前綴”吧！

更改項(xiàng)目前綴

假設(shè)我們添加的前綴為 /jimmy01/

更改頁(yè)面訪(fǎng)問(wèn)前綴

準(zhǔn)確的來(lái)說(shuō)，這一步更改的是項(xiàng)目資源的訪(fǎng)問(wèn)前綴，不僅僅是頁(yè)面的前綴。這一步驟，我們統(tǒng)一設(shè)置一個(gè)變量，然后引用資源。

統(tǒng)一設(shè)置的這個(gè)變量，在 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(), //寫(xiě)入路徑
  },
}

然后，我們?cè)诮M件中引用，比如 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; // 動(dòng)態(tài)引入
        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="http://beian.miit.gov.cn" rel="external nofollow"  className="text-sm">粵ICP備***號(hào) &copy; ***公司</a>
            </div>
            <div className="flex space-x-10 items-center py-6 sm:py-1">
              <a href={`${publicRuntimeConfig.basePath}/legal.pdf`} className="font-medium text-gray-500 hover:text-gray-900">法律聲明 & 使用條款</a>
            </div>
            <div className="flex items-center justify-end md:flex-1 lg:w-0">
              <a 
                href="https://www.***.com/en/" rel="external nofollow" 
                target="_blank"
              >
                <img
                  className="h-6 w-auto"
                  src={`${publicRuntimeConfig.basePath}/footer/footer_medical.svg`}
                  alt="medical"
                />
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}
export default Foot

也就是引入變量，然后訪(fǎng)問(wèn)，上面代碼的訪(fǎng)問(wèn)資源地址比如："{${publicRuntimeConfig.basePath}/footer/footer_medical.svg}"。

部署項(xiàng)目

項(xiàng)目開(kāi)發(fā)完成之后，執(zhí)行打包命令行 npm run build 生成一份構(gòu)建后的壓縮文件夾 out，將其更名為 jimmy01，即 out -> jimmy01。我們將其上傳服務(wù)器指定的路徑，然后用 nginx 進(jìn)行代理。

這里我們更改 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;
    }
  }
}

執(zhí)行 nginx -s reload 使得配置生效。通過(guò) http://domain.com/jimmy01/index.html 即可訪(fǎng)問(wèn)。

感謝各位的閱讀，以上就是“Next項(xiàng)目路徑怎么添加指定的訪(fǎng)問(wèn)前綴”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Next項(xiàng)目路徑怎么添加指定的訪(fǎng)問(wèn)前綴這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！