部署 vuejs&laravel 5.8 项目答案

【问题标题】：deploy vuejs&laravel 5.8 project部署 vuejs&laravel 5.8 项目
【发布时间】：2020-03-08 04:51:53
【问题描述】：

我是 Vuejs 的初学者，我做了一个项目，现在我想部署它，我试着跑了

npm run build

就像在 Ember js 和其他 js 前端框架中一样，它通常会创建一个包含我的源代码的 dist 文件夹，但我不能这样做，因为 Laravel 附带的 Vuejs 中没有定义构建脚本。
我还尝试压缩项目并将其上传到我的服务器并像其他普通 Laravel 项目一样运行它，但 Vuejs 代码总是不起作用，有没有特定的部署方法？
我已经尝试过搜索，但我没有找到解决方案

【问题讨论】：

在加载你的 laravel 页面时，是没有编译还是浏览器在 js 控制台收到 404？
laravel 默认安装中包含的脚本可以在package.json 看到。试试npm run production
不，它不显示 404 ，网站工作正常，但没有 Vuejs 处理
您的本地应用程序是否正常工作，如果没有，则将id="app" 添加到您的父级div 并参考app.js，例如：<script src="{{ mix('js/app.js') }}"></script>
此外，如果您的npm run prod 工作正常，那么所有编译和缩小的 css 和 js 都驻留在您的公共目录表单中，您可以在您的应用程序中使用它们。

标签： laravel vue.js deployment

【解决方案1】：

您可以在 laravel 应用程序主文件夹的 package.json 中看到可用的脚本。在那里你应该看到类似的东西：

"scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

将npm run production 用于生产版本，将npm run dev 用于开发版本。

在主文件夹中的 webpack.mix.js 文件中，您可以定义 webpack 配置和部署设置。详情请查看https://laravel.com/docs/6.x/mix。

如果您离开标准实现，您的resources/js/app.js 将被编译为public/js/app.js。您可以像这样在 Laravel Blade 模板中包含该文件：

<script src="{{ mix('js/app.js') }}"></script>.

【讨论】：

我尝试运行 npm run production 然后我将所有文件上传到服务器，但网站总是在没有 Vuejs 处理的情况下工作
上下文不足以找出问题所在。如果您在该页面上打开控制台并输入 window.Vue，会发生什么？它存在吗？