根据Bootstrap-vue的文档,用npm安装。
//在系统终端中: npm install vue bootstrap-vue bootstrap
然后在程序入口的app.js中引入。
// 在程序入口的app.js import Vue from 'vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // Install BootstrapVue Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin Vue.use(IconsPlugin)
然后用Laravel框架自带的Mix插件打包前端资源,此时一切正常。
//在系统终端中: npm run dev
但是网页中如果用<script src="/js/app.js"></script>导入js文件时,浏览器就会报错:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
原因是,node_modules里的Vue模块的package.json里面,设定了默认打包文件是“dist/vue.runtime.esm.js”的。
解决方法一:
修改Vue的package.json文件,修改默认打包文件:
"module": "dist/vue.runtime.esm.js" 改为↓ "module": "dist/vue.js"(如果在开发环境) "module": "dist/vue.min.js"(如果在生产环境)
解决方法二:
在Mix打包前端资源时,为import Vue from 'vue'指定别名:
=//在Laravel项目根目录的webpack.mix.js里: const path = require('path'); mix.alias({ vue$: path.join(__dirname, 'node_modules/vue/dist/vue.js') });
这样就可以正常在网页中使用<script src="/js/app.js"></script>了。
文章评论