我目前正在使用Vite和Vue 3以及TypeScript开发Symfony 3应用程序。
我用Vite Buildtool替换了Symfonys Webpack Encore，使用了这个插件：
https://github.com/lhapaipai/vite-bundle
我最初遵循迁移指南，它以前工作过。
x1c 0d1x的数据
我有一个assets文件夹，其中包含我的组件。与Vue相关的所有内容都位于assets/vue下。My App.ts包含我的组件和App. vue所需的代码。这是由Vite使用的。然后，该捆绑包允许我将编译后的js包含到我的tig文件中，如下所示：
{% block stylesheets %}
{{ vite_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ vite_entry_script_tags('app') }}
{% endblock %}字符串
要启动我的应用程序，我需要运行npm run dev (vite dev)和symfony serve (symfony server start)。
我的问题是：我的Vue应用程序不再呈现，Vue Devtools也无法识别。当我打开localhost:8000/vue.时，我看不到我的组件
我的控制台显示此错误消息：
app.js:8 Uncaught ReferenceError: exports is not defined
at app.js:8:23
(anonymous) @ app.js:8型
的
为什么会发生这种情况？我错过了什么-我以前没有遇到过这个问题。下面是我的安装文件。
运行vite dev / npm run dev.时没有任何错误
My app.vue
<script setup lang="ts">
import BaseLayout from "./layout/BaseLayout.vue";
import StickyBanner from "./patterns/StickyBanner.vue";
import ImageSlider from "./components/image-slider.vue";
import BottomMenu from "./components/bottom-menu.vue";
import NavigationBar from "./components/navigation-bar.vue";
import MasonryGallery from "./components/masonry-gallery.vue";
</script>
<template>
<BaseLayout>
<template #header>
<StickyBanner />
<NavigationBar />
<h1>Header</h1>
</template>
<template #main>
<ImageSlider />
<MasonryGallery />
</template>
<template #footer>
<BottomMenu />
<h1>Footer</h1>
</template>
<slot/>
</BaseLayout>
</template>
<style lang="scss" scoped></style>型
我的app.ts
/*
* Welcome to your app's main TS file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';
// start the Stimulus application
import './bootstrap';
import 'flowbite';
import {createApp} from "vue";
import App from "./vue/App.vue";
import ModeSwitcher from "./vue/patterns/ModeSwitcher.vue";
import ImageSlider from "./vue/components/image-slider.vue";
import StickyBanner from "./vue/patterns/StickyBanner.vue";
import ServiceInfo from "./vue/components/service-info.vue";
const app = createApp({});
app.component('App', App);
app.component('ModeSwitcher', ModeSwitcher);
app.component('ImageSlider', ImageSlider);
app.component('StickyBanner', StickyBanner);
app.component('ServiceInfo', ServiceInfo);
app.mount('#app');型
vite.config.ts
import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
import vue from "@vitejs/plugin-vue";
/* if you're using React */
// import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
/* react(), // if you're using React */
symfonyPlugin(),
vue(), // write this
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
}
},
base: '/build/',
build: {
outDir: './public/build',
rollupOptions: {
input: {
app: "./assets/app.ts",
/* you can also provide css files to prevent FOUC */
styles: "./assets/styles/app.css"
},
}
},
});型
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
},
}型
index.html.twig
{% extends 'base.html.twig' %}
{% block title %}Hello VueController!{% endblock %}
{% block body %}
Test
<div>
<div id="app">
<app></app>
</div>
</div>
{% endblock %}型
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}
{{ vite_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ vite_entry_script_tags('app') }}
{% endblock %}
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
console.log('dark')
} else {
document.documentElement.classList.remove('dark')
console.log('light')
}
</script>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>型
package.json
{
"devDependencies": {
"autoprefixer": "^10.4.14",
"core-js": "^3.23.0",
"postcss": "^8.4.21",
"postcss-loader": "^7.1.0",
"regenerator-runtime": "^0.13.9",
"tailwindcss": "^3.3.1",
"ts-loader": "^9.4.2",
"unplugin-vue-components": "^0.24.1",
"vue": "^3.0",
"vue-loader": "^17.0.1"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"@headlessui/vue": "^1.7.12",
"@vitejs/plugin-vue": "^4.1.0",
"flowbite": "^1.6.5",
"sass": "^1.62.0",
"vite": "^4.2.1",
"vite-plugin-symfony": "^0.7.6"
},
"type": "module"
}型
1条答案
按热度按时间pieyvz9o1#
我认为这可以来自你的package.json。
字符串
你的esm环境不承认一个变量特定于commonjs.你有没有尝试重命名你的配置文件后
vite.config.cjs？或删除"type": "module"（坏主意对我来说，因为在vitejs版本5有一个折旧公告）我知道vite-plugin-symfony有一个问题，这在他以前的版本，也许尝试与版本6？