Видео актуально для Symfony 7

Начать настройку связи фреймворка Vue с Symfony я бы хотел с настройки того, куда будут складываться исходники скомпилированного проекта. Когда мы все наладим, у нас будут скомпилированные файлы, которые мы можем использовать.

Но, если мы посмотрим файл package.json, здесь есть такая команда как npm run build. Если ее запустить, начнется сборка проекта и файлы скомпилируются в папку dist в папке main.

Проблем в том, что Symfony не может получить доступ к этим статическим файлам, т.к. доступ к этим статическим файлам есть только из папки public.

Нам нужно перенастроить сборку Vue проекта таким образом, чтобы скомпилированные файлы перемещались не в папку main, а чтобы они помещались в папку public. 

Чтобы это настроить, нам нужно открыть файл vue.config.js

И немного изменить структуру настроек.

const { defineConfig } = require('@vue/cli-service')
const path = require("path");
var fs = require('fs');


module.exports = defineConfig({
transpileDependencies: true,
})

Для решения этой задачи, нам потребуется библиотека path, чтобы наш Vue проект мог правильно определять абсолютный путь к папкам. 

Давайте установим ее в наш проект.

npm install path

И теперь в module exports, добавляем:

outputDir: path.resolve(__dirname, "../../public/js/main"),

Пробуем перекомпилировать проект и видим, что в папке public/js/main, появились те же самые файлы, которые до этого размещались у нас в папке assets.

Все работает и мы настроили размещение выходных файлов в доступной для Symfony директории.