vue中没有index.html 如何可以加上

发布时间 2023-09-26 09:54:06作者: 盘思动

在Vue项目中,如果没有默认的index.html文件,你可以手动创建一个并进行设置。

以下是创建并配置index.html的步骤:

  1. 在你的Vue项目根目录下创建一个新的public文件夹(如果还没有)。

  2. public文件夹下创建一个新的index.html文件。

  3. index.html文件中添加基本的HTML结构和必要的标签,例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Vue App</title>
</head>
<body>
  <!-- Vue应用程序的挂载点 -->
  <div id="app"></div>

  <!-- 引入生成的JavaScript文件 -->
  <script src="/js/app.js"></script>
</body>
</html>

在上述示例中,我们创建了一个基本的HTML结构,并在<div id="app"></div>中指定了Vue应用程序的挂载点。

然后,我们使用<script>标签引入生成的JavaScript文件。请确保将路径/js/app.js替换为实际生成的JavaScript文件路径。

  1. vue.config.js文件中进行相关配置(如果没有该文件,则在项目根目录下创建一个):
module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].template = 'public/index.html'
      return args
    })
  }
}

在上述代码中,我们通过chainWebpack的配置来指定使用我们自己创建的public/index.html作为模板文件。

这样,你就可以手动添加并配置index.html文件,让它成为Vue应用程序的入口文件。