html报错页面,多页面配置生成的html报错

你好,参照你的配置想配置vue的多页面应用,在生成html报错,初步确定是html-webpack-plugin的原因,在网上一直没找到原因,所以想您帮忙看一下,您有空帮忙能帮忙看一下吗,下面是报错生成的html

Html Webpack Plugin:

TypeError: __webpack_require__(...) is not a function

- index.html:720 Object.define

D:/WebstormProjects/workspace/app/my/athena-app/src/settlement/index.html:720:78

- index.html:620 __webpack_require__

D:/WebstormProjects/workspace/app/my/athena-app/src/settlement/index.html:620:30

- index.html:48 fn

D:/WebstormProjects/workspace/app/my/athena-app/src/settlement/index.html:48:20

- index.html:9415 Object.

D:/WebstormProjects/workspace/app/my/athena-app/src/settlement/index.html:9415:56

- index.html:620 __webpack_require__

D:/WebstormProjects/workspace/app/my/athena-app/src/settlement/index.html:620:30

- index.html:48 fn

这边是我的webpack配置

var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

var path = require('path')

var HtmlWebpackPlugin = require('html-webpack-plugin')

var merge = require('webpack-merge');

var utils = require('./config/utils.js')

var webpack = require('webpack')

function resolve(dir) {

return path.resolve(__dirname, dir)

}

var baseConfig = {

entry: utils.getEntry(),

output: {

path: path.join(__dirname, 'dist'),

publicPath: '/dist/',

filename: '[name].build.js',

},

node: {

fs: 'empty'

},

module: {

rules: [

{

test: /\.js$/,

loaders: 'imports-loader?define=>false!babel-loader',

},

{

test: /\.vue$/,

loader: 'vue-loader',

options: {

loaders: {

scss: 'vue-style-loader!css-loader!sass-loader',

sass: 'vue-style-loader!css-loader!sass-loader',

},

postcss: [

require('autoprefixer')({

browsers: ['last 2 versions']

})

]

}

},

{

test: /\.s[a|c]ss$/,

use: [

'style-loader',

'css-loader',

'sass-loader'

]

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

query: {

limit: 10000,

name: 'img/[name].[hash:7].[ext]'

}

},

]

},

resolve: {

alias: {

'vue$': 'vue/dist/vue.common.js',

},

aliasFields: ["browser"],

extensions: ['.js', '.vue']

}

}

var webpackConfig = merge(baseConfig, {

plugins: [

new webpack.optimize.UglifyJsPlugin({

compress: {

warnings: false,

},

mangle: true,

comments: false

}),

new webpack.optimize.OccurrenceOrderPlugin(),

new webpack.optimize.CommonsChunkPlugin({

name: "commons",

minChunks: 5

}

),

new webpack.DllReferencePlugin({

context: __dirname,

/**

* 在这里引入 manifest 文件

*/

manifest: require('./dist/vendor-manifest.json')

}),

new webpack.optimize.AggressiveMergingPlugin(),

new webpack.DefinePlugin({

PRODUCTION: JSON.stringify(true)

}),

new webpack.HotModuleReplacementPlugin(),

new webpack.NoEmitOnErrorsPlugin(),

new FriendlyErrorsPlugin()

].concat(utils.getHtmlPlugin())

})

console.log(utils.getHtmlPlugin())

console.log(utils.getEntry())

module.exports = webpackConfig

<think>嗯,用户遇到了在IntelliJ IDEA中运行HTML页面时出现404错误的问题。根据提供的引用内容,我需要分析可能的原因和解决方法。 首先,引用[1]提到项目中没有默认的index文件会导致404错误。这可能是因为Tomcat默认会寻找index.html、index.htm或index.jsp,如果这些文件不存在,就会报错。所以用户应该检查项目里是否有这些文件,如果没有,需要创建其中一个或者配置Tomcat使用现有的入口文件。 然后,引用[2]指出output directory路径配置错误的问题。用户可能在IDEA中将项目的输出路径设置为了项目路径而不是Tomcat的webapps目录。这会导致Tomcat无法找到部署的文件,所以需要调整输出路径到正确的webapps目录下。这一步可能涉及到项目配置中的“Artifacts”设置,确保输出目录正确。 引用[3]提到了IDEA与服务器断开连接的问题,虽然这可能和网络或配置有关,但404错误更可能与前两个引用中的原因相关。不过,如果服务器未能正确启动,也可能导致资源无法访问,需要检查Tomcat的启动日志是否有异常。 接下来,我需要将这些可能的原因整理成步骤,帮助用户逐步排查。首先确认默认文件是否存在,然后检查部署路径和配置是否正确,最后确保服务器正常运行。另外,URL拼写错误也是一个常见问题,提醒用户检查访问的URL是否正确。 同时,用户可能需要生成相关问题,比如如何配置默认入口文件、如何检查Tomcat日志等。这些可以作为后续的问题建议,帮助用户深入解决问题。</think>### 解决IDEA中HTML页面404错误的步骤 #### 1. **确认入口文件存在且命名正确** - Tomcat默认会寻找`index.html`、`index.htm`或`index.jsp`作为入口文件[^1]。 - 若项目中缺少这些文件,需手动创建或重命名现有文件为默认入口文件名。例如: ```html <!-- 在web目录下创建index.html --> <!DOCTYPE html> <html> <head> <title>Test Page</title> </head> <body> <h1>Hello World</h1> </body> </html> ``` #### 2. **检查部署路径配置** - **关键配置**:在IDEA中需确保项目的`Output Directory`指向Tomcat的`webapps`目录,而非项目自身路径[^2]。 - **操作步骤**: 1. 打开`Project Structure`(快捷键`Ctrl+Shift+Alt+S`)。 2. 选择`Artifacts` > 当前项目的Web应用配置。 3. 检查`Output Directory`是否为`Tomcat安装路径/webapps/项目名`。 - **示例路径**: ```text C:\apache-tomcat-9.0.50\webapps\MyProject ``` #### 3. **验证URL访问路径** - 访问URL需与部署上下文路径一致,格式为: ```text http://localhost:端口号/项目名/文件名.html ``` - 若项目上下文路径设置为`/`,则直接访问: ```text http://localhost:8080/index.html ``` #### 4. **检查Tomcat日志** - 若上述步骤无效,查看Tomcat的`catalina.out`日志文件,路径通常位于: ```text Tomcat安装目录/logs/catalina.out ``` - 常见错误示例: ```text SEVERE: Error deploying configuration descriptor [/WEB-INF/web.xml] ``` #### 5. **重启IDEA并清理缓存** - 执行`File > Invalidate Caches / Restart`,清除可能存在的配置缓存问题[^3]。 --- ### 其他注意事项 - **Maven/Gradle项目**:若使用构建工具,需确保`pom.xml`或`build.gradle`中已正确配置Web资源目录。 - **浏览器缓存**:尝试使用无痕模式或强制刷新(`Ctrl+F5`)避免旧缓存影响。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值