README

一个Laravel包，它将下载由webpack-html-loader构建的HTML模板，以便在您的项目中使用。

适用于与 vue-cli 一起使用。

安装

使用composer安装此包。

composer require m-porter/vue-template-loader

包发现

如果您不使用自动发现，请将 ServiceProvider 添加到 config/app.php 中的 providers 数组中。

MPorter\VueTemplateLoader::class,

配置

使用artisan的vendor:publish命令将包配置复制到您的本地配置。

php artisan vendor:publish --provider="MPorter\VueTemplateLoader\ServiceProvider"

用法

此包有很强的观点性，需要更改您的默认 vue.config.js 文件。Vue-template-loader旨在与vue-cli的多页面模式一起使用。

您可以假设以下Laravel项目结构用于此用法教程。（在运行 vue create frontend 后修改的目录结构）。

<laravel project root>/frontend
├── package-lock.json
├── package.json
├── src
│   ├── example-app
│   │   ├── App.vue
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── components
│   │   │   └── HelloWorld.vue
│   │   ├── index.blade.php
│   │   └── main.js
└── vue.config.js

• 使用 chainWebpack 删除默认的 app 条目。

  // vue.config.js
  
  module.exports = {
  
  +    chainWebpack: (config) => {
  +        config.entryPoints.delete('app');
  +    },
  
  };

• 更新 outputDir 以指向Laravel的 public 目录。

  // vue.config.js
  
  module.exports = {
  
  +    outputDir: '../public/assets',
  
      chainWebpack: (config) => {
          config.entryPoints.delete('app');
      },
  
  };

• 更新本地开发和prod的 publicPath。这将允许您在本地使用hmr和构建文件。

  NODE_ENV 已经存在于 process.env 中，但 WEBPACK_HOST 和 WEBPACK_PORT 不存在。您需要将其添加到您的npm脚本中（例如 WEBPACK_HOST=0.0.0.0 vue-cli-service serve）或使用如 dotenv 之类的npm包来读取您的Laravel .env 文件。

  // vue.config.js
  
  + const isProd = process.env.NODE_ENV === 'production';
  + const host = process.env.WEBPACK_HOST || '0.0.0.0';
  + const port = process.env.WEBPACK_PORT || 8080;
  
  module.exports = {
  
  +    publicPath: isProd ? '/assets' : `http://${host}:${port}/`,
  
      outputDir: '../public/assets',
  
      chainWebpack: (config) => {
          config.entryPoints.delete('app');
      },
  
  };

• 更新 pages 以包括您的前端应用程序。对于此示例，您可以假设以下应用程序结构。

  注意：您的文件夹 不能 命名为 app。这是vue-cli中的保留文件夹名称。

  // vue.config.js
  
  const isProd = process.env.NODE_ENV === 'production';
  const host = process.env.WEBPACK_HOST || '0.0.0.0';
  const port = process.env.WEBPACK_PORT || 8080;
  
  + const resourcePath = (n) => path.join('../../resources/views/vue', `${n}.blade.php`);
  + const filenameForEnv = (n) => (isProd ? resourcePath(n) : `${n}.html`);
  
  module.exports = {
  
  +    pages: {
  +        'example-app': {
  +            title: 'Example App',
  +            entry: 'src/example-app/main.js',
  +            template: 'src/example-app/index.blade.php',
  +            filename: filenameForEnv('example-app'),
  +        },
  +    },
  
      publicPath: isProd ? '/assets' : `http://${host}:${port}/`,
  
      outputDir: '../public/assets',
  
      chainWebpack: (config) => {
          config.entryPoints.delete('app');
      },
  
  };

  在配置中添加了两个辅助函数，resourcePath 和 filenameForEnv，以帮助根据当前环境管理输出文件命名。

  resourcePath 处理将构建的HTML模板发送到vue-template-loader期望的 resource_path('views/vue') 目录，该目录在PHP端读取。

• 试试看！从您的前端目录运行 npm run serve 并修改您的 routes/web.php。

  // routes/web.php
  
  use Illuminate\Support\Facades\Route;
  use MPorter\VueTemplateLoader\Loader;
  
  Route::get('/', function () {
      return view(Loader::getTemplate('example-app'));
  });

  现在您应该能够看到默认的vue页面了！

• 更新您的 .gitignore 以避免检查构建模板和文件。

  public/assets/
  resources/views/vue/