javascript - 如何将 Vuejs 中的仪表板模板集成到 Laravel 5.7 项目中

Question

本主题在 vuejs 开发中的集成，我已经仔细遵循了 CoreUI 文档指南，本主题设计了特定的组件，用于在 vuejs 环境中进行集成。所述文档指定了我执行的安装命令:

git clone https://github.com/coreui/free-bootstrap-admin-template.git my-project
$ cd my-project
$ npm install.

执行后，我将/src 文件夹中的文件复制到 laravel 项目的/resources 中，我还添加了:

mix.js('resources/js/app.js', 'public/js')
	.js('resources/js/bootstrap.js', 'public/js')
  /*This is the mainjs on template /src*/
	.js('resources/js/main.js', 'public/js') /*This line is added*/
   	.sass('resources/sass/app.scss', 'public/css');

mix.browserSync({
   	    proxy: 'http://localhost:8000'
   	});

用于webpack编译文件的代码/main.js 执行模板依赖

执行“npm run watch”后会产生以下错误:

ERROR in ./resources/js/router/index.js
Module build failed: SyntaxError: Unexpected token (68:31)

  66 | 
  67 | // Views
> 68 | const Dashboard        = () => import('@/views/Dashboard')
     |                                ^
  69 | 
  70 | const Colors           = () => import('@/views/theme/Colors')
  71 | const Typography       = () => import('@/views/theme/Typography')

将包含的行编码后

const Dashboard        = () => import('@/views/Dashboard')

并将它们替换为

import Dashboard        from 'resources/js/views/Dashboard.vue'

它会产生另一个错误:

ERROR in ./resources/js/router/index.js
Module build failed: SyntaxError: Unexpected token (64:31)

  62 | 
  63 | Containers
> 64 | const DefaultContainer = () => import('resources/js/views/Dashboard.vue')
     |                                ^
  65 | 
  66 | 
  67 | // // Views

在 laravel 项目中找到有关 vuejs 模板实现的文档非常有限，这使得该模板的实现变得困难。如果您对此发表评论建议或解决方案，那将非常有帮助。

Answer 1

你应该试试这个:

const Dashboard = () => System.import('@/views/Dashboard');

出于某种原因，在基于 laravel 的 Vue 项目中，我从来没有在没有系统的情况下导入工作。这已经解决了我的问题。你也可以设置:

const import = System.import();

在路由器的顶部，因此您不必修改所有导入。