标签: laravel-mix
Vite 无法解析构建的扩展
我很高兴通过本指南从 laravel-mix 迁移到 vite
\n当我跑步时npm run dev（vite），一切都很棒。
但是当我运行时npm run build，我收到错误：
\n\n错误：无法加载 resources/js/hooks/useRoute （由 resources/js/app.tsx 导入）：ENOENT：没有这样的文件或目录，打开 \'C:\\OpenServer\\domains\\colorbit.local\\ reso\nurces\\js\\hooks\\useRoute\'
\n
这是因为我导入了所有没有扩展名的文件。PhpStorm说应该是这样的，如果你添加扩展，那么它会给出一个错误，it\xe2\x80\x99s最好不要这样做。所以我在项目中的所有地方都使用了不带文件扩展名的导入。
\n导入文件时如何忽略扩展名？我应该如何更改我的 vite.config.js？\n示例：import {Button} from \'@componenst/ui/Button- 不是.ts扩展名。
这是代码
\n// vite.config.js\nimport { defineConfig } from \'vite\';\nimport laravel from \'laravel-vite-plugin\';\nimport react from \'@vitejs/plugin-react\';\n\nexport default defineConfig({\n plugins: [\n laravel({\n input: [\n \'resources/js/app.tsx\',\n ],\n refresh: true,\n }),\n react({\n fastRefresh: false\n }),\n\n ],\n resolve: {\n alias : {\n …推荐指数
解决办法
查看次数
安装npm后Ionicons没有显示
我安装了ionicons,npm install --save ionicons以便我package.json更新到:
"dependencies": {
"ionicons": "^3.0.0"
}
接下来,我加入我的下面/resources/assets/sass/app.scss:
// Ionicons
@import "node_modules/ionicons/dist/scss/ionicons";
成功运行后npm run dev,我最终得到了
/public
/css
app.css
/fonts
/vendor
/ionicons
/dist
ionicons.eot
ionicons.svg
ionicons.ttf
ionicons.woff
ionicons.woff2
在浏览器控制台中没有错误,没有显示单个 ionicon(例如<i class="icon ion-home"></i>).我检查过public/css/app.css,发现它引用了像这样的离子字体:/fonts/vendor/ionicons/dist/ionicons,这似乎符合上面的文件夹结构.
我尝试调整@import,改变url(...)参考app.css,移动字体目录 - 没有运气.最后,我尝试通过CDN引用离子,它就像魅力一样.
我在这做错了什么？谢谢
推荐指数
解决办法
查看次数
与laravel混淆代码
我有一个带有laravel和vuejs的Web应用程序。我使用laravel-mix并且在我webpack.mix.js有：
const { mix } = require('laravel-mix');
mix.sourceMaps();
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
现在我会混淆代码，所以我所有的组件，如何使用laravel-mix来做到这一点？
推荐指数
解决办法
查看次数
无法在 laravel mix 中添加 bootstrap.min.js
我正在尝试通过Laravel mix.
当我尝试在混合中添加 bootstrap js 时，我遇到了问题，它说 can't resolve propper.js，但我已经在它之前添加了，
这是我的混合配置代码。
var mix = require('laravel-mix');
mix
.js([
'resources/assets/js/jquery.min.js',
'resources/assets/js/popper.min.js',
'resources/assets/js/bootstrap.min.js',
'resources/assets/js/app.js'
], 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css');
我认为我以错误的方式做某事，请纠正我。
推荐指数
解决办法
查看次数
如何将字体真棒导入Laravel？
如何在laravel项目中添加font-awesome.我跑了:
npm install font-awesome
但接下来是什么,如何在我app.scss正确的路径中导入它？我正在尝试:
@import "/node_modules/font-awesome/scss/font-awesome.scss";
但得到和错误:
ERROR in ./resources/assets/sass/app.scss
模块构建失败:ModuleBuildError:模块构建失败:@import"/node_modules/font-awesome/scss/font-awesome.scss";
推荐指数
解决办法
查看次数
如何在 Laravel webpack.mix.js 中添加全局函数？
我正在使用 Laravel mix 来编译我的资产并将它们组合成单个文件。我创建了一个新的 js 文件并在其中编写了一些方法。我将此文件与 app.js 文件结合在一起。当我尝试调用这些方法时，我的刀片文件中出现错误function not defined。我无法访问这些方法。
请帮我调用这些方法。
Laravel 混合代码
mix.js([ 'js/app.js',
'js/custom.js'
], 'public/js'),
.....
自定义.js
function test(){
alert('test')
}
测试刀片.php
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
test();
</script>
错误：未定义测试
推荐指数
解决办法
查看次数
使用 Mix 在 Laravel 中未检测到 VueJs
我正在尝试使用 laravel 5.7 和 mix 设置 VueJs，它只是说未检测到 VueJs。我已经跑了npm install。这是我的欢迎观点：
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
<style type="text/css">body { padding-top: 40px; }</style>
</head>
<body>
<div id="root" class="container">
<message title="Hello World" body="Lorem ipsum dolor sit amet."></message>
</div>
</body>
</html>
这是我的应用程序js：
require('./bootstrap');
window.Vue = require('vue');
Vue.component('message', require('./components/Message.vue'));
const app = new Vue({
el: '#root'
});
我不明白为什么 VueJs 不起作用。任何帮助将不胜感激。谢谢！
推荐指数
解决办法
查看次数
Laravel Mix 中的 Webpack 别名为 node_modules
我想在 Laravel 5.8 项目中的 VUE.JS 中使用别名来导入模块中的 css 和 js。
webpack.mix.js
mix.webpackConfig({
resolve: {
alias: {
'alias': path.resolve(
__dirname,
'~myModule/src'
)
}
}
});
在我的 VUE App.js 中，我想导入 css 文件夹，我写道：
资源/js/app.js
// css files
import 'alias/lib/css'
// js files
import 'alias/lib/script'
但我错了，因为别名没有解析：
./resources/js/app.js 中的错误未找到模块：错误：无法解析...中的“alias/lib/css”
你能帮我解决这个问题吗？
推荐指数
解决办法
查看次数
Laravel-Mix + BrowserSync 未在 localhost:3000 加载
我正在尝试设置BrowserSync以处理我的Laravel项目。但是，当我运行时npm run watch，localhost:3000不会加载。我在终端中没有收到任何编译错误。有趣的是，UI 仪表板localhost:3001运行良好。
如果我运行php artisan serve，localhost:8000加载正常，但当然，它与BrowserSync.
我的webpack.mix.js文件看起来像这样：
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.browserSync({proxy:'localhost:3000'});
我正在使用以下版本：
Laravel-Mix: 4.0.7
browser-sync: 2.26.7
webpack-dev-server: 3.8.0
browser-sync-webpack-plugin: 2.0.1
有什么想法吗？
推荐指数
解决办法
查看次数
无法运行 npm 脚本，它显示“错误：生成 node_modules/webpack/bin/webpack.js EACCES”
我正在尝试在刚刚安装和配置的 Linux Mint 上运行我的项目，但是当我运行 npm run dev 命令时。出现“spawn node_modules/webpack/bin/webpack.js EACCES”错误。
重装节点、升级版本、清除缓存节点、删除文件夹等网上提供的方法我都试过了。但仍然错误。
> @ dev /home/wirnat/Web/Bukasewa/bukasewa.vBETA
> node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
events.js:187
throw er; // Unhandled 'error' event
^
Error: spawn node_modules/webpack/bin/webpack.js EACCES
at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
at onErrorNT (internal/child_process.js:456:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:270:12)
at onErrorNT (internal/child_process.js:456:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21) {
errno: 'EACCES',
code: 'EACCES',
syscall: 'spawn node_modules/webpack/bin/webpack.js',
path: 'node_modules/webpack/bin/webpack.js',
spawnargs: [
'--progress',
'--hide-modules',
'--config=node_modules/laravel-mix/setup/webpack.config.js'
]
}
npm ERR! code …推荐指数
解决办法
查看次数
标签 统计
laravel-mix ×10
laravel ×7
javascript ×5
webpack ×4
vue.js ×3
browser-sync ×1
font-awesome ×1
ionicons ×1
laravel-5.4 ×1
laravel-5.7 ×1
node.js ×1
php ×1
sass ×1
uglifyjs ×1
vite ×1