与使用vue-cli或通过vue-cli创建的项目模板相关的问题
我正在尝试使用此图表创建一个漏斗,但我找不到使其工作的方法。我正在使用 VueCLI (vue 2)。 执行 npm install Chart.js Chartjs-chart-funnel 后,控制台上甚至出现错误
构建期间出现错误:RollupError:从 vue-cli 迁移到 vite 后需要表达式
我刚刚从 vue-cli 迁移到 vite。在本地服务工作正常,但在构建过程中,我收到以下错误: x 构建在 221 毫秒内失败 构建过程中出错: RollupError:需要表达式 在
vue-cli-service:语法错误:意外的标记“...”。需要一个属性名称
我正在努力使用vue组装一个小应用程序,我特别需要它在不支持ES6的设备上运行。我正在使用 vue-cli-service build 来构建,当尝试打开这个时
我们正在将 Jest 引入现有项目。 不过,我写了一个示例测试代码。 出现上述错误。 ReferenceError:Vue 未定义 1 |从“../components/
当我使用 vue 3 时,npm WARN 已弃用 [email protected]
我正在使用 Vue 3,但遇到以下错误消息:“npm WARN deprecated [email protected]: Vue 2 已达到 EOL,不再主动维护。”为什么我会收到此错误?...
构建 Vue.js 应用程序时 JavaScript 堆内存不足
我正在尝试构建一个用于生产的 vue.js 应用程序。此错误消息总是在中途出现。 致命错误:接近堆限制的无效标记压缩分配失败 - JavaScript 堆超出
使用 Vue CLI 创建 Vue 应用程序并提供 npm start 时出现错误
我正在尝试使用 **Vue CLI ** 命令创建一个应用程序 - npm 创建 vue@latest 在 npm isnstall 之后,我尝试使用 **npm run dev 运行我的应用程序 ** 但出现以下错误。我将不胜感激任何...
我在 Heroku 上部署 Node.js 应用程序(其中包括 Vue.js 前端)时遇到了持续存在的问题。尽管多次尝试和不同的配置,我的构建始终如一......
我有一个 Vue 应用程序,在 npm runserve 后在控制台中输出以下内容。 DONE 17450ms 编译成功...
我可以在非 root 下运行 vue-cli-service 进行测试吗?
当我在我的开发机器上启动 vue-cli-service 进行测试时,它默认将我的项目托管在根 URL(即“/”)处。我想在非根目录下启动 vue-cli-service 服务...
我正在使用vue-cli。我尝试直接在 index.html 文件中添加 aframe,并将其导入到我的顶级 main.js 文件中。我只是无法让 Vue 识别 aframe 元素。 我是不是错过了一些
你好,我尝试全局导入一个variables.scss文件我的vue.config.js [在此输入图像描述][1] 变量.scss [在此输入图像描述][2] 和我尝试使用它的 vue 文件 [输入我...
当我运行命令 npm install -g vue-cli 时,我收到以下警告,显然我没有错误 但执行时 vue 初始化 webpack 我的项目 或者 vue--版本 弹出这个
我有一个使用 Vue CLI 5.0.1 制作的 Vue3 项目 我的设置有一个公共文件夹,其中有我需要提供服务的静态资产,但它非常重(1GB 资产),因此当我启动 npm runserve c...
我正在使用 vue-cli-service (webpack,还没有 vite)运行 Vue 3 应用程序。 因为我想为单独的应用程序重新使用一些代码,所以我需要创建一个单独的 HTML 模板文件...
我的 Vue 组件在顶级 HTML 文件中声明时工作正常,如下所示 ... 我的 Vue 组件在顶级 HTML 文件中声明时工作正常,如下所示 <body> <div class='app' id='app'> <header-bar id='headerBar'></header-bar> <journal-page></journal-page> </div> <script src="js/app.js"></script> </body> 但是在 <journal-card> 组件内使用 <journal-page> 组件给了我错误: [Vue warn]:无法解析组件:日记卡位于<JournalPage>。 请问我该如何解决这个问题? 这是我加载 Vue 组件的顶级代码,app.js: import * as _vue from 'vue'; import _headerBar from './widgets/headerBar.vue'; import _journalCard from './widgets/journalCard.vue'; import _journalPage from './widgets/journalPage.vue'; import _store from './data/store.js'; const app = _vue.createApp ({ components: { 'headerBar': _headerBar, 'journalCard': _journalCard, 'journalPage': _journalPage }, data : _store, methods: {} }); const mountedApp = app.mount('#app'); 这是我的journal-page.vue容器 <template> <ul> <journal-card v-for="item in journal" :key="item.id" :entry=item></journal-card> </ul> </template> <script lang="js"> import _store from '../data/store.js'; export default { 'data': _store }; </script> 和journal-card.vue组件 <template> <div> hi imma journal entry </div> </template> <script lang="js"> export default { 'data': null, 'props': [ 'entry' ] }; </script> 在根组件的 components 选项中注册组件不会使它们成为全局组件。这样做只会使它们可供根组件本身使用,而不是其子组件。 要全局注册组件,请在顶级代码中使用 app.component: main.js import { createApp } from 'vue'; import App from './App.vue'; import MyGlobalComponent from './components/MyGlobalComponent.vue'; const app = createApp(App); app.component('MyGlobalComponent', MyGlobalComponent); ✅ const mountedApp = app.mount('#app'); 另外,由于在搜索引擎中查找“Vue 3 无法解析组件”的一些问题时会显示此页面,因此 Vue 3 / Quasar 2 已弃用了一些内容: 例如。 q-侧链接 默默地消失了(这里是上一个文档) 根据此评论: QSideLink——不再需要!只需使用 QItem 或其他东西 您想要的组件并将 @click="$router.push(...)" 绑定到它。 抱歉,如果它不完全符合主题,但它会咬伤其他人,所以我更愿意帮助一个人发表此评论;-) 在我的场景中,问题是不同的。我试图在 laravel Blade 文件中渲染类似的多字 Vue 组件。 如果您在非 .Vue 文件(例如 HTML / Laravel Blade 等)中引用 Vue 组件,则应使用短横线格式来引用组件名称。喜欢my-global-component Vue 文档 - https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats 对我来说,它是在数组中声明组件: components: [ActiveUser, UserData] 本应位于对象中: components: {ActiveUser, UserData} 确保安装代码最后出现 app.mount('#app') app.component('list-view', ListView2) 是错误的并且不会起作用但是 app.component('list-view', ListView2) app.mount('#app') 是正确的。
Vue-CLI 版本号 - 它是否存在以及如何在 Vue 应用程序本身中使用它?
我正在使用 Vue CLI 构建一个用于生产部署的 Vue 应用程序。 我想在应用程序中包含一个典型的递增构建号,以便我和测试人员可以确保我们正在测试...
在 webpack 中,我可以在 package.json 中设置环境变量,如下所示: “脚本”:{ “dev:visualise”:“webpack服务--open--config webpack.dev.js--env条目=
如果使用 lerna run,则忽略特定模式的 Vue 构建
所以我有一个 vue 项目,package.json 中包含此脚本: "build-test": "vue-cli-service build --mode test" 在项目中,我有 .env 和 .env.test 文件。 现在,一切...
Vue CLI 组件样式标记 NOT 范围未应用于 Rails CSP 错误
我有一个带有 Vue 的 Rails 应用程序。当我尝试在 标签中添加某些内容时,它不会被应用。它在渲染的 HTML 中也不可见。我的依赖项中没有 css-loader...</desc> <question vote="1"> <p>我有一个带有 Vue 的 Rails 应用程序。当我尝试在 <pre><code><style></code></pre> 标签中添加某些内容时,它不会被应用。它在渲染的 HTML 中也不可见。我的依赖项中没有 css-loader,当我安装它时,整个应用程序无法工作。</p> <p>我的index.html.erb</p> <pre><code><%= stylesheet_pack_tag 'hello_vue' %> <%= javascript_pack_tag 'hello_vue' %> </code></pre> <p>我的<pre><code>hello_vue.js</code></pre></p> <pre><code>import Vue from 'vue' import App from '../app.vue' document.addEventListener('DOMContentLoaded', () => { const app = new Vue({ render: h => h(App) }).$mount() document.body.appendChild(app.$el) console.log(app) }) </code></pre> <p>我的<pre><code>app.vue</code></pre></p> <pre><code><template> <div id="app"> </div> </template> <script> export default { } </script> <style> #app{ background: aqua; } </style> </code></pre> <p>我的 <pre><code>package.json</code></pre> 与 css-loader (不起作用)</p> <pre><code>{ "name": "name-of-project", "private": true, "dependencies": { "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "5.4.3", "css-loader": "^6.3.0", "leaflet": "^1.7.1", "turbolinks": "^5.2.0", "vue": "^2.6.14", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.14", "vue2-leaflet": "^2.7.1", "webpack": "^4.46.0", "webpack-cli": "^3.3.12" }, "version": "0.1.0", "devDependencies": { "@vue-leaflet/vue-leaflet": "^0.6.1", "webpack-dev-server": "^3" } } </code></pre> <p>(我删除了我的实际代码,但一开始也不起作用)</p> <p>当我在浏览器中使用检查编辑样式时,它可以工作。另外,当我添加内联样式时,它会起作用,例如:</p> <p>我使用 <pre><code>rails install:webpacker:vue</code></pre> 命令安装了 vue。当我只创建一个 vue 项目时,它运行得很好,但是,这次使用 vue 时它似乎不起作用,我不知道为什么。</p> <p>编辑: 这与由于 CSP 的原因样式标签被阻止加载这一事实有关。根据 Vue 的说法,这种情况不应该发生,但它确实发生了,而且网络上没有任何答案。 <a href="https://i.stack.imgur.com/UDqD5.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1VEcUQ1LnBuZw==" alt=""/></a></p> </question> <answer tick="true" vote="0"> <p>我在<a href="https://medium.com/@acesubido/solving-csp-problems-on-vue-2-0-and-rails-webpacker-3-5-7f2faf086aff" rel="nofollow noreferrer">Medium post</a>上找到了解决方案。最重要的部分是 <pre><code>rails/webpacker.README.mb</code></pre> <em> 的屏幕截图,我在当前的 README.md</em> 中找不到它了。 <a href="https://i.stack.imgur.com/jvyN7.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2p2eU43LnBuZw==" alt=""/></a></p> </answer> </body></html>