前端笔记11——修改VUE CLI的入口文件main.js的路径（vue.config.js）

因为练习需要，VUE创建一个脚手架后，需要做很多不同的练习，不可能每一个小的练习都创建一个新的脚手架，所以就复制一份src文件夹，然后把原来做过的src改名。因为VUE CLI默认只识别src目录下的main.js。这样，问题就来了，每次都要改将之前该过名的目录改回src才能运行。能不能不改文件的名称，VUE自动识别去运行自己想要的目录呢？在网上查了一些资料后，终于找到方法了，就是修改默认的入口文

Shaoxi Zhang

6295人浏览 · 2022-05-04 16:14:32

Shaoxi Zhang · 2022-05-04 16:14:32 发布

因为练习需要，VUE创建一个脚手架后，需要做很多不同的练习，不可能每一个小的练习都创建一个新的脚手架，所以就复制一份src文件夹，然后把原来做过的src改名。因为VUE CLI默认只识别src目录下的main.js。这样，问题就来了，每次都要改将之前该过名的目录改回src才能运行。

能不能不改文件的名称，VUE自动识别去运行自己想要的目录呢？

在网上查了一些资料后，终于找到方法了，就是修改默认的入口文件路径，这个配置在哪里设置呢？答案在根目录下的vue.config.js配置文件上。

初始默认vue.config.js配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

配置后的vue.config.js配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pages: {//配置多页面入口               
    index: {              
      // entry: 'src2/main.js', 
      entry: 'src-1 第一次在VUE中使用Axios/main.js', 
      entry: 'src-2 axios获取数组数据并渲染/main.js', 
      entry: 'src-3 分别用ge和post方法获取Token/main.js', 
      //当有多行是，VUE以最后一行entry为准。         
      // template: 'public/home.html',        
    },    
        // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
  },
})

当有多行是，VUE以最后一行entry为准。经过上面添加后，我只要将我想运行的路径放在最后一行entry，就可以正常运行我想运行的项目。

我的VUE CLI版本是vue/cli 5.0.4

PS D:\SVNfiles\Ajax\vue-cli\clibasic> vue --version
@vue/cli 5.0.4

VUE vite的入口文件修改

如果是使用的VUE3 vite，则分为开发版本和生产版本

开发版本
则开发模式下，改入口文档在根目录的index.html中：

  <body>
    <div id="app"></div>
    <!-- <script type="module" src="/src/main.ts"></script> -->
    <script type="module" src="/src2/main.ts"></script>
  </body>

这个已经测试过成功

生产版本

  build:{
    rollupOptions: {
    // 覆盖默认的 .html 入口
       input: '/src2/main.ts'
    }
  }

生产版本未测试过

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^