是否有办法用.NET MVC为vue.js statc文件提供服务?
我得到了Vue-CLI生成的示例VUE应用程序,并使用NPM Run Build命令生成静态文件. 通常,您使用node.js的服务器为文件提供服务,但我想知道是否有一种从我的ASP.NET MVC应用程序中提供这些文件的方法. 我之所以问这个,是因为我需要展示vue.js的工作原理 解决方案 在ASP.NET应用程序中的客户端路由 迟到的回复,但分享是因为简单的答案很难找到. UseStaticFiles()的使用已有充分记录,并且将适用于SPAS ,直到 该页面被刷新或使用直接URL访问该应用程序. 要启用客户端路由,可以将后备路径配置为将任何未解决的服务器端路由传递到客户端应用程序. 简短说明 假设您的VUE应用程序(或任何水疗中心)被复制到名为wwwroot的根目录中: 在startup.cs中,在configure()中,添加UseDefaultFiles()和UseStaticFiles(),以便找到并提供index.html.
6 2024-04-23
编程技术问答社区
如何在BootstrapVue旋转木马中包含图片?
我正在尝试将图像添加到boostrapvue中b-carousel的 img-src ="" 属性.该图像当前保存在资产文件夹中. 在 Hello world! 我添加了 在下面找到结果的图表: 我确定图像正确保存在正确的位置: 解决方案 如果使用带有WebPack的加载程序(即Vue-Loader,URL-Loader等),则需要确保加载程序知道img-src接受URL. 请参阅有关如何告诉加载程序在自定义组件上处理URL道具的信息的文档:
4 2024-04-02
编程技术问答社区
用bootstrap-vue运行jest
我一直在与vuejs和 Bootstrap-vue 最近. 决定将单元测试添加到我的项目中. 我不太熟悉单元测试,所以我正在尝试任何可以找到它的工作原理. login.specs.js import { shallowMount, mount } from '@vue/test-utils' import Login from '@/components/auth/Login.vue' describe('Login.vue', () => { it('is a Vue instance', () => { const wrapper = mount(Login, { mocks: { $t: () => 'Connexion' // i18N } }) const h2 = wrapper.find('h2') expect(h2.text()).toBe('Connexion') }) }) 登录
12 2024-04-02
编程技术问答社区
如何在VUE CLI项目中使用base64-inline-inline-loader将字体文件嵌入CSS中?
我将一些自定义字体文件导入VUEJS项目的SCSS文件.构建时,它将在app.js和app.js和app.css文件中创建这些与字体相关的文件.这些文件包括font-name.ttf,font-name.woff,font-name.woff2和font-name.svg 我想像base64 data uri一样,将这些字体文件嵌入app.css文件中. . 有一个NPM软件包,名为 base64-inline-loader 似乎是我问题的好选择. 软件包的文档指示一种与WebPack配置一起使用的方法.由于我的项目使用vue-cli 3和vue-cli-service来运行构建命令,因此我知道我需要使用vue.config.js文件正确配置 base64-inline-line-loader . 我不是一个大型Webpack专家,只知道它的基本概念.我在vue.config.js文件中配置软件包时遇到了麻烦. 希望有人已经有一些在vue.js项目中使用相同软件
12 2024-03-27
编程技术问答社区
为什么webpack将require('path to img.png')转换为base64?
我有一个聊天和一个存储所有历史记录的JSON文件.所有图像/视频/音频链接到需要("通往媒体的路径"). 但是,由于某种原因,当使用vue-cli-service服务或vue-cli服务构建时,webpack跳过我的图像,该图像用于表情符号,而不是将其包含在Dist文件夹中,而是将其转换为base64 string. JSON看起来像这样: { type: 'emoji', author: `me`, data: { src: require('../../Media/img/smiling-face.png') } }, { type: 'text', author: `me`, data: { text: `Do you read me...`, meta: '✓✓ Read' } }, { type: 'image', author: `support`, data: { src: require('../.
10 2024-03-27
编程技术问答社区
如何在VUE项目中添加Babel对NullishCoalescingoperator的支持?
在我的vue-cli项目中,当我尝试使用??运算符时,我得到了此错误: 语法错误:SyntaxError:/users/stevebennett/odev/freelance/v-map/src/src/components/mmap.vue:>支持实验性语法的NullishCoaleScingOperator'当前未启用(30:29): ... 添加 @babel/plugin-proposal-nullish-coalescing-operator( >)到Babel配置的"插件"部分以启用转换. 我安装了 @babel/plugin-syntax-nullish-coalescing-operator(其名称似乎已更改),将其添加到我的babel.config.js: module.exports = { presets: ['@vue/app'], plugins: ['@babel/plugin-syntax-nullish-coale
6 2024-03-26
编程技术问答社区
将Vue.js应用程序部署为Visual Studio代码的Azure应用程序服务
我有一个vue.js应用.该应用是使用 Vue-cli 创建的.目前,这是一个基本的" Hello World"应用程序.我在本地计算机上运行了这个应用程序.我通过在Visual Studio代码中的终端窗口中使用npm run serve运行它.我现在尝试将此应用程序从Visual Studio代码部署到Azure应用程序服务. 我创建了一个Azure应用服务.我还安装了 azure azure应用程序服务录像带代码扩展.从Visual Studio代码中的"终端"窗口中,我输入了" NPM Run Build".这创建了一个名为" Dist"的目录.然后,我右键单击该目录,然后选择"部署到Web应用程序...".然后,我选择我的订阅和应用服务名称,然后选择"部署".我看到了一个提示,上面写着"部署到".查看我的node.js应用.我缺少什么? 尝试部署此应用程序,我从"终端"窗口中运行npm run build.这创建了一个" DIST"目录. 解决方案 请参阅本
6 2024-03-26
编程技术问答社区
在我的所有组件中全面使用axios vue
我正在使用VUE应用程序和CLI中的Axios进行测试.我一直在使用vue-resource,只需将其传递给vue.use(vueresource),就可以在所有组件上访问它.如何使用Axios来实现此目标,因此我不必将其导入组件,而只需将其定义一次. 解决方案 在main.js中,您可以将Axios分配给$ http. main.js import Axios from 'axios' Vue.prototype.$http = Axios; 通过修改VUE原型,任何VUE实例都可以在this上调用$http. (例如this.$http.get('https://httpbin.org/get') 注意:$http现在是Axios对象,因此您可以在Axios对象上调用的任何方法,都可以致电this.$http. . 其他解决方案 注意:当将VUE模块安装为软件包而不是通过CDN使用时,如果从CDN导入VUE,则该方法可以正常工作,然后我们有两个选
12 2024-03-22
编程技术问答社区
VueJs-在vue.config中设置多个代理
所以我正在用这样的代理进行API调用: vue.config.js: module.exports = { devServer: { proxy: 'http://www.pathofexile.com/' } } xxx.vue: axios.get("http://localhost:8080/api/public-stash-tabs").then.. 这有效!现在,当我想从另一个站点进行API调用时,我也不确定该怎么做.像这样的东西是我想要的: vue.config.js: module.exports = { devServer: { proxy: { 'http://localhost:8080/one/': { target: 'http://www.pathofexile.com/', changeOrigin: true }, 'http
10 2023-12-01
编程技术问答社区
Vue Cli 3热重新加载突然不在浏览器中工作
我有一个由Vue Cli 3生成的VUE项目,我的热重装突然停止在浏览器中工作.对代码的更改仍由终端拾取,但是,我的浏览器没有拾取更改.我必须手动刷新才能进行新的更改.正如我在vue.config.js中手动设置poll: true的其他一些人所建议的那样,我也试图设置代理,但两者都没有成功. 有什么建议是使这项工作再次工作? 更新: 经过一些VUE更新后,它突然再次开始工作.我仍然不知道这样做的原因.这可能是vue-cli中的错误? 解决方案 我的问题是WDS 显示控制台: [HMR] Waiting for update signal from WDS... [WDS] Disconnected! GET http://ip:port/sockjs-node/info?t=some-number net::ERR_CONNECTION_TIMED_OUT sockjs.js?some-number 对我的解决方案是: 在 中 package
18 2023-12-01
编程技术问答社区
VUE路由器和WebPack-历史模式config localhost
基本上,我正在使用WebPack模板使用Vue CLI,我需要在Vue路由器中使用历史模式,但是我正在使用params作为路由. 我读了此文档:开发服务器vue.js中VUE路由器(历史模式)的问题 - "无法获取/配置" 所以我从: 更改WebPack.dev.conf.js historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], } to historyApiFallback: true 现在,当尝试访问带有参数的页面时,我会得到一个空白页.有任何线索吗? 解决方案 更新: 我在Vue论坛和@linusborg中揭露了这个问题 基本上,他建议"不必在WebPack/Config Files上更改任何内容(I [L
10 2023-12-01
编程技术问答社区
Vue-3中的动态导入图像
我正在尝试显示动态导入的映像,但它不使用Error '找不到模块' 这是我的组件 import { defineComponent } from 'vue' import { useStore } from '@/store' import { requireImage } from '@/modules/images' export default defineComponent({ name: 'F
16 2023-12-01
编程技术问答社区
为什么当我从github repo克隆时,我的webpack项目无法构建?
所以我在一台机器上有一个旧版本的项目,该项目是使用其他机器处理的github repo. 因此,我在第一台计算机上删除了旧版本的文件夹(事先将其备份到本地文件夹).然后,我做了git pull origin master将项目从github存储库中提取.我做了npm install,npm audit fix和npm audit -f fix摆脱了漏洞. 这个项目使用webpack和vue-cli,所以我将npm run dev放入终端,现在我遇到了一个错误,没有任何有关为什么发生错误的信息. 这是github存储库,请按照我刚刚描述的复制步骤进行操作. https://github.com/adamcole123/pharaoh-web-web-app------------------------------------------------------ 预先感谢! 编辑: 我觉得这可能与全球依赖关系有关,但我不知道它们会是什么.因此,如果
12 2023-12-01
编程技术问答社区
如何在Chrome开发工具中区分名称相同的VueJS+WebPack模块?
我正在开发VueJS WebPack 4捆绑的应用程序.它具有许多由每个目录区分的 crud 模块,但每个目录中都有相同的命名文件.所以.... components ╠═ Person ║ ╠═ index.js ║ ╠═ Create.vue ║ ╠═ Update.vue ║ ╠═ Retrieve.vue ║ ╚═ Delete.vue ╠═ Tool ║ ╠═ index.js ║ ╠═ Create.vue ║ ╠═ Update.vue ║ ╠═ Retrieve.vue ║ ╚═ Delete.vue ╚═ Zone ╠═ index.js ╠═ Create.vue ╠═ Update.vue ╠═ Retrieve.vue ╚═ Delete.vue 我的问题是,当我与Chrome Dev Tools进行调试
14 2023-12-01
编程技术问答社区
如何输出单个构建.
我正在使用vue-cli 2.9.6,并使用vue init webpack . 创建了一个VUE项目 当我调用vue run build时,它正在创建许多不同的JS文件(并且每次名称都会更改... vendor.20d54e752692d648b42a.js vendor.20d54e752692d648b42a.js.map app.ed70f310595763347909.js app.ed70f310595763347909.js.map manifest.2ae2e69a05c33dfc65f8.js manifest.2ae2e69a05c33dfc65f8.js.map 以及类似的CSS文件: app.a670fcd1e9a699133143a2b144475068.css app.a670fcd1e9a699133143a2b144475068.css.map 我希望输出简单为2个文件: build.js { f
4 2023-12-01
编程技术问答社区
Untuff offect Reference Error:从VUE CLI V4升级到V5后未定义过程
我正在使用一个应用程序,在该应用程序中,我已经更新了前端以使用V4中的VUE CLI V5,并且正在遇到运行时错误:未定义的参考:未定义过程. Process.version.在我使用的JSONWEBTOKEN库中引用.请参阅下面: 我在汇编过程中有一些相关的错误错误,我在下面使用WebPack 5: 固定了下面的CLI V5. fallback: { crypto: require.resolve('crypto-browserify'), buffer: require.resolve('buffer'), util: require.resolve('util'), stream: require.resolve('stream-browserify') } 在我的webpack配置文件中,我尝试添加/设置process.env变量: module.exports = { plugins: [ new webpac
14 2023-12-01
编程技术问答社区
vue.js应用程序中静态资产的路径
我正在基于VUE-CLI WebPack模板开发单个页面应用程序.由于我们也必须使用静态资产,因此我们需要在样式表中参考它们. 正式文档建议使用以下绝对路径: background-image: url('/assets/images/lo/example2.svg'); 问题是,Vue-Loader和WebPack本身不会处理静态资产,因此在最终输出样式表中无法正确设置URL. WebPack URL-LOADER将处理的所有资产将根据您的公共路径配置获得正确的相对URL.静态资产需要相同的效果. 您是否知道如何将静态资产与基于vue.js的应用程序结合使用? 更新 在研究和大量反复试验之后,我决定将最终样式表和脚本束放在index.html旁边的根文件夹中.生成的路径将正常工作.这不是最佳解决方案,因为我更喜欢脚本和样式表的子文件夹(尽管它们仅包含一个文件).但是,尽管如此,我还是有一个生成一致且有效的工件的构建过程. 解决方案 对于"真实"
20 2023-12-01
编程技术问答社区
没有找到CSS和JS的Vue远端路径
构建后,我在呈现VueJS应用程序时遇到了麻烦.当我在构建文件夹中查看路径时,我的资产,CSS和JavaScript的路径开头就有一个前向斜线.这使得无法找到我的CSS,资产和JavaScript.我想知道,在运行构建脚本之前,我如何避免此问题.谢谢.这是我的代码: app.vue --> import BaseTimer from "./components/BaseTimer"; // import PomodoroTimer from "./components/PomodoroTimer"; export default { name: "App", components: { BaseTimer // PomodoroTimer
16 2023-12-01
编程技术问答社区