问题标签 [vue-cli-4]

我有一个小前后端分离的项目，有开发环境和生产环境，所以想设置代理调用api。vue/cli 版本是 4.6.5。

文件结构：

.env.development：

.env.生产：

vue.config.js：

axios：</p>

api.js：

我在 vue 文件中调用 api，如下所示：

我在终端收到 404： 错误：xhr.js:160 GET http://localhost:8080/blog/dev-api/blog/lastBlogs 404

并且后端的api没问题： 当我在浏览器中输入http://localhost:8080/blog/api/blog/lastBlogs时，我得到这个： {"code":"0","msg":"操作成功","data":[{"id":1,"blogUser":1,"blogTitle":"test1","blogDescription":"for test","blogContent":"ABABABAB","blogCreated":" 2020-09-20T10:44:01","blogStatus":0},{"id":2,"blogUser":1,"blogTitle":"test2","blogDescription":"for test","blogContent ":"BABABABABA","blogCreated":"2020-08-20T10:44:01","blogStatus":0}]}

我该怎么办？谢谢。

我在项目文件夹中新安装了 npm 后，npm run serve 不起作用。我正在使用最新的 webpack。还尝试全局卸载和安装 npm。虽然这是在 npm install 之前运行的。package.json 从一开始就没有任何变化。我不知道这里出了什么问题。下面给出错误

在 checkResourceSource (E:\projects\project-emr\emr\node_modules@vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)

Hey is it possible to use bootstrap or vuetify with Vue CLI 4 (Vue3)? I couldn't find any information on the vuetify site (says CLI 3 or higher) neither on the bootstrap site.

I tried to install it, but I got the WARN default exports are missing...

我的 CLI 版本是 4.5.8。我正在尝试安装 Vuetify，但出现了这个错误。有些人请帮我解决这个错误。

我正在尝试创建 Vue.js 3 SSR 应用程序（包括 ts、@vue/cli、babel）。我使用 nodejs + express 作为后端。SSR 工作正常（我正在从服务器正确呈现 html），但在客户端水合期间发生错误。似乎我的客户端构建不包含组件的模板，因为我在浏览器中遇到了这些错误

我发现当我用渲染函数替换模板时错误消失了，但它再次出现在子组件中（为简单起见，HelloWorld 没有子组件）。
这是我的 github 存储库，我在其中重现了我的问题。

index.html

package.json

vue.config.js

App.vue

HelloWorld.vue

app.ts

entry-server.ts

entry-client.ts

server.js

我的设置

我正在开发一个项目，我希望该功能可以打印页面的特定元素。有一个名为 VueHtmlToPaper 的 mixin/plugin 可以完全满足我的需求，但是我无法将它导入到我的 Vue 3 CLI 项目中，因为它是为 VueJS2 创建的并且全局 API 不同。任何帮助表示赞赏。

main.js

项目结构：

对于以下问题的任何帮助将不胜感激！

情况：

我的项目包含两个包：

1. 子组件库

   • 包含以组合 API 样式编写的单个视图About.vue（带有 vue2 辅助库@vue/composition-api和vuex-composition-helpers）
   • 导出单个RouteConfig
   • 构建为一个库

   views/About.vue（孩子）

   router/index.ts（孩子）

   lib.ts（孩子）

   package.json（孩子）

2. 父应用

   • 将路由从child-component-lib导入到其路由器
   • 包含一个简单的视图，显示一行文本和一个<router-view />

   package.json（父母）

   router/index.ts（父母）

   App.vue（父母）

预期行为

它可以正常工作。

实际行为

我在控制台中看到错误输出。[Vue warn]: Error in data(): "Error: You must use this function within the "setup()" method, or insert the store as first argument."错误消息具有误导性，因为错误实际上是在setup()方法内部引发的。它可以追溯到getCurrentInstance()返回undefined（内部@vue/composition-api）。

调查：

• 事实证明，当我在父应用程序本身中包含相同内容时，错误消失About.vue了（只需切换路线，尝试一下），即，当我们避免从构建的库中导入时它可以工作。
• 所以看起来这是构建设置的问题（ 之一，，，，，vue.config.js... webpack）babeltypescript

重现错误：

1. 克隆、安装、运行

或一一

2.打开浏览器

• 转到 http://localhost:8080/

3. 打开开发工具查看错误

错误截图

环境信息：

当我vue-cli通过此命令创建一个新项目时

vue create hello-word

和这个命令安装vuetify

vue add vuetify

然后我看到我的 git 变化是这样的

两个新的依赖项已安装在package.json.

1. vue-cli-plugin-vuetify
2. vuetify-loader

乍一看，我以为vue.config.js已经指定使用这两个，但它的内容只有这些代码。

那么，怎么vue-cli知道我已经安装了这个新的 vuetify 加载器呢？

它会自动拾取那些吗？

这是我的 vue.config.js 配置：

运行ue-CLi-service build-mode test后，打包后的代码包含进程，应该是node环境，但不能在浏览器环境下运行

以下屏幕截图代码是发生错误的地方。因为项目build输入了Process，所以在浏览器运行的时候就报错了。有谁知道为什么会出现这个问题

我想为我的代码添加async-catch-loader自动注入try catch。我的项目基于 Vue CLI 和 TypeScript。所以我需要使用 webpack-chain 来改变tswebpack 的规则，如下图所示：

但是，我不知道如何添加async-catch-loader之前和之后的ts规则。webpack-chain 有功能可以做到吗？babel-loaderts-loader