如何在Next JS中设置页面的自定义目录？(不是src或root)
在Next JS中，可以通过配置文件实现自定义目录的设置。具体步骤如下：
- 在项目根目录下创建一个名为
next.config.js的文件。 - 在
next.config.js文件中，使用module.exports导出一个包含配置选项的对象。
// next.config.js
module.exports = {
// 设置自定义目录
webpack(config, { defaultLoaders }) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
publicPath: '/_next/static/', // 设置自定义目录的路径
outputPath: 'static/', // 设置自定义目录的输出路径
name: '[name].[hash].[ext]'
}
}
})
return config
}
}上述配置中，我们使用了webpack配置选项，并添加了一个module.rules规则，用于处理静态资源文件（如图片、字体等）。其中，publicPath表示资源文件的公共路径，outputPath表示输出路径。可以根据自己的需求进行调整。
通过上述配置，我们成功在Next JS中设置了自定义目录。注意，这里的自定义目录不包括src和root。
相关·内容
在下面的设置中有父页和子页
仪表盘/
-儿童1.vue
-儿童2.vue
dashboard.vue
我在dashboard.vue中的代码：
<template>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<admin-navbar></admin-navbar>
<main-sidebar></main-s
浏览 2提问于2021-03-23得票数 0
我使用为我正在构建的Express.js API创建公共文档。我的问题是，如何使用Express.js来路由和服务文档？
这里是我的Express服务器设置：
/** Load config into globally defined __config
* @requires fs */
var fs = require('fs');
__config = JSON.parse(fs.readFileSync('config/config.json'));
/** Custom Logging Moduele
* @requires ninja_module
浏览 1提问于2013-08-28得票数 5
回答已采纳
我有一个多页新闻应用程序建立在CQ5和使用build.phonegap.com编译。我想不出如何从所有的超文本标记语言页面中引用cordova.js。
在index.html上使用<script src="cordova.js"></script>很容易，但这个应用的结构是这样的:每篇文章在不同的目录下都是自己的HTML文件。我不能硬编码JS引用，因为我需要它在一个文件上是<script src="../cordova.js"></script>，在另一个文件上是<script src="../../
浏览 1提问于2014-11-04得票数 0
2回答
我有一个引用javascript文件的母版页，这是js文件夹。文件和母版页都在根目录中。
我的许多表单都在不同的文件夹中，比如
Root>first>abc.aspx
Root>second>def.aspx
Root>second>anotherFolder>def.aspx
我像这样保存了引用
<script type="text/javascript" src="js/Check.js"></script>
我还尝试了src="<%= Page.Reso
浏览 2提问于2013-05-15得票数 0
我想要创建一个多页的反应应用程序使用反应性路由器，而不使用节点js。我创建了一个index.html文件和app.js文件。我的档案如下：
index.html
<head>
<title>React Demo</title>
<link rel="shortcut icon" href="favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js">
浏览 2提问于2017-04-19得票数 1
我有4页，我可以顺利地在它们之间滑动。但是当我在第一个没有页面之前或者最后一个页面之后没有页面时，我的滑动就停止了。它不再将事件转到下一页或上一页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2
/jque
浏览 0提问于2015-06-10得票数 0
回答已采纳
我在一个纯html网站上使用i18next。
以下是错误消息：
I18Next：：missingKey en翻译标题
以下是代码：
///multilng.js
(function () {
i18next
.init({
"debug": true,
"lng": "en",
"ns": [
"translation"
],
"fallbackLng": false,
"keySeparator": fals
浏览 1提问于2018-06-11得票数 3
以前我的项目设置是
public
.next
src
pages
components
assets
next.config.js
这个方法工作得很好，但我将结构改为如下
public
src
client
next.config.js
jsconfig.json
pages
components
assets
server
index.js
现在这个不起作用了。我收到错误的Couldn't find apagesdirectory. Please create one under the project r
浏览 17提问于2020-05-20得票数 1
回答已采纳
我创建了一个名为Supermarket的项目。每当我运行npm run build时，就会成功地构建它。问题是，在运行serve -l之后，它将显示文件夹目录和文件，而不是项目的索引页。
下面的代码是我的package.json配置：
"scripts": {
"start": "react-scripts start",
"build": "rm -rf build/ && react-scripts build && npm run-script sw",
浏览 0提问于2019-07-31得票数 0
回答已采纳
我正在使用Next.js，并且在我的pages文件夹中有一个文件夹learning。现在，这个learning文件夹大约有10页。
如果用户未登录，则所有这些页面都需要重定向到索引页。下面的代码可以完成这项工作，但是是否有其他方法来保护多个页面，这样我就不需要一次又一次地向所有页面添加相同的代码了吗？
export async function getServerSideProps(context) {
//redirect to index page if not logged in
const session = await unstable_getServerSessio
浏览 22提问于2022-10-05得票数 0
回答已采纳
我正在为我的一个网络项目学习Django。面对在我的项目中附加css，jquery文件的困难。该模板非常简单，不需要使用extends.Just一页表单。我声明了我的媒体文件:在settings.py文件中:添加了路径：
`import os
def path(*x):
return os.path.join(os.path.abspath(os.path.dirname(__file__)), *x)
然后添加`：
MEDIA_ROOT = path('media') #media is my folder where all the css,js file are
浏览 0提问于2010-11-20得票数 5
回答已采纳
3回答
我有一个母版页，在该页中，我将.js文件的代码编写为：
<script src="../../../scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
页面是在不同的文件夹结构中创建的。
因此，如果page不是在文件夹中创建的，如果它位于文件夹的外部，那么javascript就无法工作。
例如，：
master page file:主页/布局母版
页面：
页面/文件夹1/default1.aspx
页/文件夹2/default2.aspx
default3.aspx
浏览 6提问于2012-11-16得票数 0
3回答
HTML，包括使用PHP的CSS
、、、、
我正在尝试建立一个单页面的动态站点，但我遇到了一个障碍。由于URL如下所示：
index.php?page=Tutorials&Article=0
并不是那么漂亮，我决定使用.htaccess重写URL，在本例中是这样的：
Tutorials/Articles/0
但这意味着我的大多数包含都不能工作，因为我使用的是相对于站点根路径的路径：
js/jquery-1.9.1.min.js
我试图通过使用index.php开头包含的以下代码来解决这些问题：
$str = dirname(__FILE__);
$str = str_replace('\\','/'
浏览 2提问于2013-05-10得票数 0
我按照盖茨比公司网站上的指示做了以下工作：
cp . .cache/default-html.js src/html.js
进入(由gatsby创建的) html.js文件，并在head部分添加了一个注释。
而不是使用{/* */}作为第一个抛出错误
当我运行盖茨比开发时，我首先得到一个错误，加载/query的404页，然后也加载其他页面
有人知道怎么做吗？谢谢。
浏览 3提问于2021-01-28得票数 0
我正在尝试将网站地图添加到我的next.js网站。我将以下代码添加到server.js中
server.get('/sitemap.xml', (req, res) => {
const options = {
root:'./',
headers: {
'Content-Type': 'text/plain;charset=UTF-8',
}
};
return res.status(200).sendFile('s
浏览 0提问于2020-05-27得票数 1
2回答
因此，我在rails 4.2.0上使用ruby2.1.5构建了一个“web应用程序”。
我现在想要的是一个单页的登陆页。我不希望这个登陆页面受到我在样式表布局中的任何其他现有css文件的影响。
登陆页面(理想情况下)使用名为freelancer.css的css文件，我的站点的其余部分使用default.css。
简单地说，我如何在为我的应用程序的其余部分转义css/scss文件的同时，专门为单个视图/控制器调用样式表。
登陆页面有自己的控制器，名为欢迎。
class WelcomeController < ApplicationController
def index
ren
浏览 2提问于2015-04-12得票数 1
回答已采纳
1回答
我使用苹果登录，直到我登录到苹果，并且苹果重定向向我的服务器发送了一个Post请求。
我设置了以下快递处理程序：
app.post('/apple-callback', async function (req, res) {
let data = req.body.id_token
let buff = Buffer.from(data.split('.')[1], 'base64')
let text = buff.toString('utf8')
let json = JSON.parse(te
浏览 11提问于2020-02-25得票数 0
回答已采纳
在开发过程中，通常我会将大量第三方库分别导入到我的html中，如下所示：
<script src="/resource/jquery-validation-1.15.0/jquery.validate.js" type="text/javascript"></script>
<script src="/resource/jquery-validation-1.15.0/localization/messages_en.min.js" type="text/javascript"></scr
浏览 0提问于2016-07-07得票数 3
回答已采纳
我现在对Django (1.9)很生气！最可悲的是‘静态URL’是一个给我带来问题的地方。“headache”运行良好，没有问题，但是静态url让人头痛不已。
在我的settings_dev.py里
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_PATH = os.path.abspath(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(PROJECT_PATH,'../static/'
浏览 6提问于2016-08-03得票数 0
回答已采纳
我使用next.js和reactjs完成了一个项目。我把next.js和reactjs一起用于SSR。
现在的问题是我无法构建这个项目。如果我构建(next build，next export)，生成的index.html只显示第一页，其他页面链接不起作用。如何构建项目和生成文件。有可能。
我有一个linux共享主机。next.js工作在linux共享宿主中。请带我过去。我是next.js的新手。
package.json
{
"name": "my-app",
"version": "0.1.0",
"pri
浏览 3提问于2019-12-22得票数 0
我正在使用下面的命令构建Angular 4项目
ng build --target=production --base-href /project1
当我将项目部署到tomact 8时，当我将索引文件放在
C:\apache-tomcat-8.0.44_2\webapps\project1
以及根文件夹中的应用程序资产和其他文件。
C:\apache-tomcat-8.0.44_2\webapps\ROOT
如何将所有应用程序资源放在项目文件夹中。
谢谢
在项目构建之后，我的index.html看起来像这样。
<base href="/project1">
&
浏览 0提问于2017-10-13得票数 0
2回答
我正在工作的Next.js示例应用程序喜欢下面的链接 https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app 这是我的next.config.js const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')
module.exports = withPWA({
pwa: {
dest: 'public',
浏览 52提问于2020-10-23得票数 2
回答已采纳
我正在为一些使用Next/Image的组件编写一些测试。当我不断收到错误时，我决定像这样模拟模块：
jest.mock(
`next/image`,
() =>
function Image({ src, alt }) {
// eslint-disable-next-line @next/next/no-img-element
return <img src={src} alt={alt} />;
},
);
到目前为止，一切都很好，效果很好。但是我有多个使用next/image
浏览 0提问于2021-11-26得票数 1
我的代码具有目录结构：
project-root/
└── src/
└── main.js
当我运行默认的Babel文件观察者时，代码会被转换到一个dist文件夹中，包括它的路径中的src目录，如下所示：
project-root/
└── src/
├── main.js
dist/
└── src
└── main.dist.js
相反，我希望src被排除在路径之外-换句话说，src中的转换代码将被“展开”并直接编译到dist中，如下所示：
project-root/
└── src/
├── main.js
dist/
浏览 0提问于2018-06-10得票数 0
回答已采纳
1回答
获取图像路径
、、
我编写了一个javascript方法来动态显示一个图像，这取决于是否安装了一个插件。根据页面的不同，url可能深入到子路径中，我想看看是否可以在没有所有标记的情况下返回到图像的路径。
示例
myImage src位置={root}/内容/图像/myImage.png
现在调用js在下面的页面上显示图像。我用src路径显示示例页的路径和图像元素。注意它有多不同取决于我们有多深。如果我使用一个绝对路径，那么我将不得不为我的测试环境和生产更改它。我想我可以用~，但我想不用了。想法？
-- <img src="../../Content/Images/myImage.png"
浏览 2提问于2009-12-21得票数 2
回答已采纳
我需要在447页的html中添加三行。具体地说，我需要添加以下行：
<input name="prev" type="button" value="prev" onClick="handlePrev()" id="prevButton">
<input name="next" type="button" value="next" onClick="handleNext()" id="nextButton">
&l
浏览 0提问于2012-05-03得票数 2
回答已采纳
首先，我在php文件上运行这段代码，并使用WampServer在本地主机上运行它。分页不起作用，所以我尝试将其转换为html文件("sample.html")。这里的代码如下。
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/easypaginate.js"></script>
<script
浏览 3提问于2012-02-18得票数 0
回答已采纳
请参考下面的代码，用于从数据库加载数据。代码在第一次加载数据时运行良好。每条记录和每一页都加载得很完美。
现在，如果我调用Reload函数，它就会产生问题。
有时它会加载重复行(例如，如果我的jason返回20行，网格将显示40行)
我把栅格中记录的最后一页弄丢了。
jQuery("#list").jqGrid({
url: "http://localhost/myapp/myfile.php",
datatype: "json",
浏览 3提问于2012-05-22得票数 0
(CrossSlide)
(LightBox)
这是我的标题：
<script type="text/javascript" src="<?php echo ROOT.'sources/js/jquery.js'; ?>"></script>
<script type="text/javascript" src="<?php echo ROOT.'sources/js/contentSlider/jquery.cross-slide.js'; ?>
浏览 2提问于2009-07-22得票数 1
回答已采纳
你好：)是关于next/link的_app.js和<Link>的
-问题(类似标题)
当我单击next/link时，调用了_app.js错误。
关于错误，它是如下所示的Can't Get Fetch Data。
但是，在点击(第一页)之前，没有问题。
这些数据是<Header>的数据
因此，我在getInitalProps()中用_app.js(普通事物容器)实现了数据获取代码。
因为我知道_app.js是常见的容器，像<Header>一样的普通事物总是呈现
甚至导航其他/页/位置。但发生了错误..。
我知道的是错误的.？(或者是函数式_a
浏览 0提问于2019-11-22得票数 0
回答已采纳
我找到了一个JavaScript代码来将日历嵌入到一个Qualtrics问题上。
Enter a survey date:
<link href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></scr
浏览 4提问于2020-06-16得票数 0
回答已采纳
我有如下所示的文件夹结构
角src
钢筋混凝土
index.html
引导
css
app.js
在我的app.js文件中，我将这个静态文件夹设置为：
// Set Static Folder
app.use(express.static(path.join(__dirname, 'public')));
我想在index.html中设置css和引导文件。
下面是index.html文件：
<!DOCTYPE html>
<html>
<head>
<title&
浏览 1提问于2017-12-22得票数 0
我已经部署了在Next.js中构建的网站，很明显，当您部署下一个js应用程序时，您可以找到所有静态文件和资源的目录，而我对这些文件和资源并不满意。
目录是以这种方式生成的：mydomain.com/_next/static (在我的例子中是https://www.ovanya.com/_next/static/ )。
这是目录：
下一个js 说：
若要防止显示目录列表页，请添加一个索引文件，例如index.html，然后该索引文件将在访问目录的路径时显示该文件。
但我真的不明白应该将index.html文件添加到哪个目录中？那么，我应该把index.html放在哪里呢？
另一个问
浏览 4提问于2020-06-27得票数 2
回答已采纳
3回答
我正在尝试使用，它运行得很好，如下所示：
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">&l
浏览 3提问于2013-10-16得票数 3
回答已采纳
1回答
我使用彩色盒()来调用ajax文件。
这些html文件将js数组加载到表中，如下面的代码：
这一切都很好，但是当按下“颜色框next”按钮时，JS表数据不会加载。
我认为这可能是因为document.onload已经发生了。尽管我试图在ajax文件中调用JS，但我似乎只能在第1页获得表数据。单击next后，表数据不会显示。
我正在考虑改变next按钮的行为，以便显示表数据。有什么想法吗？
这是我在jquery.colorbox.js中可以找到的下一个按钮代码：
$next.click(function () {
publicMethod.next();
});
和
$g
浏览 4提问于2011-09-20得票数 0
2回答
如何从Rails控制器的所有方法中创建一个可以读取和更改的公共变量？我真正的密码：
require 'yaml'
class Es1Controller < ApplicationController
def common_variables
@questions = YAML.load_file(File.join(Rails.root, "/app/assets/es_data/questions.yml"))
@object = Hash.new
@object[:next_question] = 1
@objec
浏览 3提问于2014-05-02得票数 1
回答已采纳
我试过下面的答案，但没有成功。
我一直在谷歌搜索，但找不到任何useful...my JS文件是在同一水平的WEB.任何帮助将不胜感激.
下面是我用来在JSP中包含JS文件的代码:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.valida
浏览 2提问于2018-11-12得票数 0
回答已采纳
我遵循的‘添加反应网站’的指南，但它似乎没有正确的工作，因为某些原因。
不起作用的代码：
index.html：
<html>
<head>
<!-- Load React -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-d
浏览 1提问于2018-09-08得票数 1
回答已采纳
当我在本地开发时，当我将/public文件夹放在/src/中时，就可以找到图像
# locally
./src/public/images/
然后，当我进行部署时，就找不到映像了。但是，当我将公用文件夹放置在src之外时，就可以找到图像：
# deploy
./public/images/
./src/
我把这些图像用作：
<img src="/images/my-image.jpg" alt="" />
是否有我必须使用的配置设置？
编辑：
全结构：
|- .now/
| |- project.json
| └── README.txt
浏览 3提问于2020-03-22得票数 5
回答已采纳
2回答
我对Selenium很陌生，并试图用它来构建一个项目。我需要学习如何点击一个JS链接。有许多按页面列出的项目。不幸的是，分页是由JS完成的。举个例子..。
<ul class="pagination museo-700">
<li class="first hidden disabled">
<a href="#">First</a>
</li>
<li class="prev disabled">
&l
浏览 5提问于2016-10-12得票数 4
回答已采纳
我正在跟踪，并得到以下错误：
我正在通过节点引导我的应用程序，该节点呈现索引页：
module.exports = function(app) {
app.get('*', function(req, res) {
res.sendfile('./public/index.html');
...
});
这使：
<html ng-app="DDE">
<head>
<script src="//ajax.googleapis.com/ajax
浏览 3提问于2015-07-18得票数 7
回答已采纳
当在我的next.js应用程序中找不到页面时，我想停止重定向到404页面。我只想在不重定向或更改URL的情况下显示404组件。
目前，next.js重定向到404/ URL。
有什么办法吗？
谢谢!
浏览 1提问于2022-01-29得票数 0
我想使用Vue构建一个web应用程序，它应该具有如下的网站结构：
index-page
|--page1
|--page2
|--page3
...
也就是说，我有一个索引页，这将是我的主页，其中包含所有其他页面的链接。
但是，每一页都来自某个类别和一个子类别，所以我希望每一页的地址应该如下：
localhost:8080/category/sub-category/page
example: localhost:8080/algorithms/sorting/bubble
在我的项目结构中，这些类别和子类别排列如下：
my-project/src/category/sub-c
浏览 0提问于2019-09-07得票数 0
回答已采纳
3回答
我想写一个函数来做一件简单的事情。我有10页的数据，每页有20条记录。当用户进入第一页底部并单击Load More时，我希望加载第二页的数据，将这些数据附加到第一页显示的数据中。
我发现了一个名为infinitescroll的jquery插件。它对我来说很好，只是我不能附加更新的数据。
我的html：
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script typ
浏览 1提问于2013-11-06得票数 4
我有一个网站，在那里我试图在我的母版页上实现一个基于jQuery UI的MessageBox。内容页面根据业务区文件夹进行排列，即'~/Branding/Contracts.aspx‘。我发现当我加载这样的内容页时，在母版页中引用的jQuery没有加载。我假设这是因为浏览器正在请求'Branding/Scripts/jQuery‘。对此我能做些什么呢？我在普通的“script”标记中没有“root”运算符。
<script src="/Scripts/jquery-1.3.2.js" type="text/javascript">&l
浏览 2提问于2010-04-08得票数 7
回答已采纳
我一直在尝试为一个角7项目创建Azure端点到blob存储容器。
采取了以下步骤。
一个标准的，热的LRS布洛布存储器。
在“创建的blob”下，创建一个具有访问blob匿名读取访问权限的容器。
上载dist/*到容器。
用标准Verizon创建CDN配置文件
创建一个端点，其原始主机名设置为上面的第1点，并创建到blob容器的orgin路径。
现在，我的端点主机名看起来像https://<myendpoint>.azureedge.net
当我从浏览器导航到这个链接时，没有默认的XML显示。当我导航到https://<myendpoint>
浏览 1提问于2019-04-24得票数 1
回答已采纳
我有这样的项目结构：
/root
/static
script.js
page.html
此代码：
<html>
<head>
<script src="/static/script.js"></script>
</head>
<body>
...
</body>
</html>
在以下方面的成果：
Loading failed for the <script> with source “fi
浏览 0提问于2019-05-10得票数 3
回答已采纳
1回答
我使用一个脚本标记来向我的Next.js应用程序添加一个小部件。我已经为这个小部件创建了一个节组件，但是当我运行应用程序时，它呈现在我的页脚下面，但是它应该作为节组件呈现在上面。有人能帮我解决这个问题吗？
下面您将看到问题的屏幕截图、我的index.js、脚本组件和我希望它被呈现的组件。另一个用户问。有人知道怎么修吗？
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
im
浏览 7提问于2021-12-13得票数 1
回答已采纳
我有响应性的Html网站
我想在简单html中隐藏并显示next的点击。
DEMO PAGE
Q1.WHAT IS YOUR NAME
ANS - JAMES
Q2.WHAT IS YOUR ADDRESS
ANS- PUNE
在这里，Q1和Q2在同一页上，但是
我想一次只显示一个问题，但不想创建多个物理页面。
我尝试使用css的隐藏和显示技巧，但是我想在简单的html按钮上点击NEXT。
希望输出如下所示
Q1.WHAT IS YOUR NAME
ANS- JAMES
[CLICK NEXT]
它将在同一个页面上加载Q2。
我试着不使用像下面这样不同页面的一个页面。
<link
浏览 5提问于2014-03-11得票数 0
回答已采纳
在OpenShift Node.js应用程序的早期，process.env.OPENSHIFT_REPO_DIR环境变量是可用的。不，我迁移到OpenShift 3，并得到错误。
var apn = require('apn');
var optionsP = {
token: {
key: process.env.OPENSHIFT_REPO_DIR + 'APNsAuthKey_AQ34EHZCDQ.p8',
keyId: "AQ34EHZCDQ",
teamId: "AQUJ3
浏览 2提问于2017-09-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
