Vue-Study-区别开发模式和生产模式

1-关于目录下public/index.html文件和dist/index.html文件区分

• 开发模式：运行 npm run serve 时，加载的是 public/index.html。

• 生产模式：运行 npm run build 后，加载的是 dist/index.html。

• public/index.html 是开发阶段的入口文件，用于开发和调试。

• dist/index.html 是生产环境的入口文件，用于部署和运行。

2- <router-link> 和 <router-view> 的区别

<router-link> 是 Vue Router 提供的一个组件，用于创建导航链接

<router-view> 是 Vue Router 提供的一个占位符组件，用于显示当前路由对应的组件内容。

3-main.js中 app.use(router)要在app.mount('#app')之前

//使用路由

app.use(router);

//挂载到id为app的元素上

app.mount('#app');

总结：

1-在路由配置的时候，首先在router下面的js文件中进行添加路由以及引用，然后在mian.js需要对这些对路由进行引用（其实也可以配置在mian.js）文件中；

2-我们其实也可以将一些路由配置到其他的js文件中，建议放在router目录下，然后只需要再router.js路由配置文件中，对这些js文件进行声明即可，具体声明方式可以参考如下

import Routes from './home';      //这里代表引用

const routes = [

  {

    path: '/',

    name: 'HomePage',

    component: HomePage

  },

  ...Routes,                                 //这里代表声明

];

const router = createRouter({

  history: createWebHashHistory(),

  routes

});

export default router;