[Desarrollo de ingeniería] http://localhost:8080/ access, Cannot GET / solution

Al configurar y usar el complemento desde cero, se produce una excepción de empaquetado del paquete web. Excepción: no se puede OBTENER / al acceder a una dirección (http://localhost:8080/) después de completar el empaquetado.
inserte la descripción de la imagen aquí
solución:

  1. Configure al instalar el complemento: webpack-dev-serve.
	// 注意:package.json文件中的scripts节点的dev里面加一个 serve。
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve"
  },
  1. Después de instalar el segundo complemento: html-webpack-plugin, también debe configurarse (se olvidó de configurarlo en esta posición, lo que resultó en la excepción Cannot GET/).
// 注意:webpack.config.js文件中进行配置。
// 1. 导入html插件,得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin');

// 2. 创建 html 插件的实例对象
const htmlPlugin = new HtmlPlugin({
    
    
  template: './src/index.html',                     // 指定原文件的存放路径
  filename: './index.html',                         // 指定生成文件的存放路径
});

module.exports = {
    
    
  entry: path.join(__dirname,'./src/index.js'),     // 打包入口文件的路径
  output: {
    
    
    path: path.join(__dirname,'./dist'),            // 输出文件的存放路径
    filename: 'bundle.js'                           // 输出文件的名称
  },
  // devServer: {
    
    
  //   open: true,                                  // 初次打包完成自动浏览
  //   host: '127.0.0.1',                           // 实时打包所使用的主机地址
  //   port: 80                                     // 实时打包所使用的端口号
  // },
  // 3. 通过Plugins节点,使htmlPlugin插件生效
  plugins:[htmlPlugin],                             
  "mode": 'development'      // mode用来指定构建模式。可选值:development和production。
} 

Una vez completada la configuración, el problema está resuelto.

Supongo que te gusta

Origin blog.csdn.net/YBJ2022/article/details/129311426
Recomendado
Clasificación