需要路由原始的html，css和js文件。我在当前项目中使用VueJS。我不是使用单一文件组件，而是在html和js文件中使用标准Vue实例（新的Vue（））和Vue组件（Vue.component）。
HTML文件包含这些新的Vue实例，并且我正在使用脚本标签将组件导入其中。 在.js中使用Vue.component（'name'）语法和模板文字组合创建组件。
我的问题是，我该如何路由这些？ vue-cli的执行方式是否相同？使用webpack？因此，我基本上可以在dist中填充包含css和这些js组件的标记。
我尝试使用webpack进行此操作，尽管当我需要导入/包括所有这些.js文件时，我仍然停留在该部件上。我应该将它们导入main.js中吗
import '../js/comp.js还是？
当运行“运行”脚本并访问localhost：PORT / home或类似文件时，我希望能够访问所有标记页面。
account.html 文件的示例-注意：您看到的这些导入的软件包在当前代码中具有它们的作用，我只是删除了这些插件的用法，因为不需要过多使用html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CallAnswering | Account settings</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="On this page users can change thier settings and personal information" name="description">
<meta content="Petar Brkovic" name="author">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
<!-- Topbar Start -->
<nav-top page_title="Account"></nav-top>
<!-- end Topbar -->
<!-- ========== Left Sidebar Start ========== -->
<nav-side></nav-side>
<!-- Left Sidebar End -->
<!-- Footer Start -->
<footer-comp></footer-comp>
<!-- end Footer -->
</div>
</div>
<!-- END wrapper -->
<div id="modal-wrap">
<!-- Change Picture Modal -->
<change-pic-modal></change-pic-modal>
<!-- Verify Modal -->
<verify-modal></verify-modal>
</div>
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<!-- Vue Components -->
<script src="../components/core/nav-top.js"></script>
<script src="../components/core/nav-side.js"></script>
<script src="../components/core/footer.js"></script>
<script src="../components/selects/time-zones.js"></script>
<script src="../components/selects/cor.js"></script>
<script src="../components/selects/cob.js"></script>
<script src="../components/selects/country.js"></script>
<script src="../components/selects/account-type.js"></script>
<script src="../components/account/verify-modal.js"></script>
<script src="../components/account/change-pic-modal.js"></script>
<!-- VUE | STARTS -->
<script>
// Define new Vue insntace based on 'wrapper' which wraps top & side nav components in it
new Vue({ el: '#wrapper' });
new Vue({ el: '#modal-wrap' });
</script>
<!-- VUE | ENDS -->
<!-- Vendor js -->
<script src="../../public/assets/js/vendor.min.js"></script>
<!-- custombox -->
<script src="../../public/assets/libs/custombox/custombox.min.js"></script>
<!-- Mulitselect -->
<script src="../../public/assets/libs/multiselect/jquery.multi-select.js"></script>
<script src="../../public/assets/libs/select2/select2.min.js"></script>
<script src="../../public/assets/libs/switchery/switchery.min.js"></script>
<script src="../../public/assets/libs/dropify/dropify.min.js"></script>
<!-- form-upload init -->
<script src="../../public/assets/js/pages/form-fileupload.init.js"></script>
<!-- Init js-->
<script src="../../public/assets/js/pages/form-advanced.init.js"></script>
<!-- Sweet Alerts js -->
<script src="../../public/assets/libs/sweetalert2/sweetalert2.min.js"></script>
<!-- Sweet alert init js-->
<script src="../../public/assets/js/pages/sweet-alerts.init.js"></script>
<!-- Core JS Files -->
<script src="../../public/assets/js/jquery.bootstrap.js" type="text/javascript"></script>
<!-- Plugin for the Wizard -->
<script src="../../public/assets/js/material-bootstrap-wizard.js"></script>
<!-- More information about jquery.validate here: http://jqueryvalidation.org/ -->
<script src="../../public/assets/js/jquery.validate.min.js"></script>
<script src="../../public/assets/js/pages/verification.js"></script>
<!-- App js -->
<script src="../../public/assets/js/app.min.js"></script>
</body>
</html>
组件 nav-top.js的示例：
Vue.component('nav-top', {
props: ['page_title'],
data() {
return {
user: {
first_name: 'Matt',
last_name: 'Test',
full_name: `${this.first_name} ${this.last_name}`
}
}
},
template: `
<div class="navbar-custom">
<ul class="list-unstyled topnav-menu float-right mb-0">
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle nav-user mr-0 waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="../../public/assets/images/users/user-1.jpg" alt="user-image" class="rounded-circle">
<span class="pro-user-name ml-1">{{ user ? user.full_name : ' '}} <i class="mdi mdi-chevron-down"></i>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
<!-- item-->
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Welcome!</h6>
</div>
<!-- item-->
<a href="account.html" class="dropdown-item notify-item">
<i class="fas fa-user"></i>
<span>My Account</span>
</a>
<div class="dropdown-divider"></div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
<!-- LOGO -->
<div class="logo-box">
<a href="index.html" class="logo text-center">
<span class="logo-lg">
<img src="../../public/assets/images/logo-b&w.png" alt="CallAnswering logo" height="50">
<!-- <span class="logo-lg-text-light">Xeria</span> -->
</span>
<span class="logo-sm">
<!-- <span class="logo-sm-text-dark">X</span> -->
<img src="../../public/assets/images/logo-sm.png" alt="CallAnswering logo" height="48">
</span>
</a>
</div>
<ul class="list-unstyled topnav-menu topnav-menu-left m-0">
<li>
<button class="button-menu-mobile disable-btn waves-effect">
<i class="fe-menu"></i>
</button>
</li>
<li>
<h4 class="page-title-main">{{ page_title }}</h4>
</li>
</ul>
</div>
`
})