vue 使用fs_vue的多页面配置

最新推荐文章于 2024-08-01 08:00:00 发布
最新推荐文章于 2024-08-01 08:00:00 发布
阅读量1.7k 收藏
点赞数
文章标签： vue 使用fs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31328141/article/details/112190469
版权
本文介绍了如何在Vue项目中配置多页面应用，并提供了改造Vue-cli webpack项目的方法。涉及到修改utils.js、webpack配置文件以及切换路由模式为history。同时，详细讲解了当使用history模式时，如何通过Nginx配置实现平滑访问各个页面。
摘要由CSDN通过智能技术生成
756edc3c56d4df1c522ed00b3be9d9dc.png 
由于项目需求将vue改造成多页面，简单记录下改造的过程，以及如何使用。

如何使用项目

  1. git clone
  2. url克隆项目到本地
  3. 在src/pages文件夹下，所有的页面都在pages下编写，新建一个目录(开发项目名称)demo，在demo中新建一个demo.js,demo.html,demo.vue,router/index.js这是一个单独文件的所有文件，每一个目录相当于一个项目需求，是一个单独分开的页面，例如demo和sign活动
  4. 具体代码可参考文件中的sign和index目录。

项目改造过程

选型时考虑到多页面更合适目前项目，对新建项目进行改造，记录代码如下.

  1. vue-cli webpack 项目名称(安装项目)
  2. 修改文件build/utils.js，加入如下代码
// 多入口页面配置(读取pages下面文件夹下的js文件，js最好和目录文件名字一致)exports.entries = function () {  let entryFiles = glob.sync(PAGE_PATH+'/*/*.js') let map = {} entryFiles.map((filePath) => { let f
最低0.47元/天 解锁文章
黄一刀有毒
关注
vuefs:带有Vue.js和Webpack的F＃ASP.NET Core 2.0示例项目
05-17
F＃ASP.NET Core 2.0 + Vue.js 带有Vue.js和Webpack的F＃ASP.NET Core 2.0 SPA示例项目 要求 要测试是否已安装并可以找到它，请在命令行上运行node -v 2.0版或更高版本 入门 在项目的根目录中打开一个命令窗口，然后运行以下命令： dotnet restore npm install node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js node node_modules/webpack/bin/webpack.js --config webpack.config.js 此时，您应该能够在VS2017中构建/运行项目。 您可能会遇到一些打字稿错误，但可以忽略不计。
fs 文件系统模块
qq_45901521的博客
03-07 966
1. 什么是 fs 文件系统模块 fs 模块是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求。 例如： l fs.readFile() 方法，用来读取指定文件中的内容 l fs.writeFile() 方法，用来向指定的文件中写入内容 如果要在 JavaScript 代码中，使用 fs 模块来操作文件，则需要使用如下的方式先导入它： const fs = require('fs') ...
electron-vue中利用FS模块进行本地文件操作
最新发布
qugeshenmominzi的博客
08-01 730
【代码】electron-vue中利用FS模块进行本地文件操作。
Vue3+ts 使用node基于fs模块在视图上对系统文件、目录进行读写、进入下一级返回上一级的操作。
m0_62758542的博客
09-06 4897
vue3+ts 使用node基于fs模块在视图上对系统文件、目录进行读写、进入下一级返回上一级的操作。
Vue2+fs如何写入数据到文件里
qq_41632427的博客
05-28 658
fs是不能在浏览器环境中执行的 没有node环境 并且写文件没有权限。
详解如何将 Vue-cli 改造成支持多页面的 history 模式
08-28
然而，当项目需求扩展到多页面应用时，Vue-cli的默认配置并不完全适用。在这种情况下，需要对Vue-cli进行改造，使其支持多页面的history模式。历史模式（history mode）是Vue Router的一种路由模式，它可以提供更...
vue中的ref和$refs的使用
01-21
如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。 ref 有三种用法： 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用...
fs
03-06
古洛 VUE造轮子 介绍 这是我个人学习创造的的Vue UI组件库 开始使用 添加CSS样式 使用本框架前，请在Css中开启box-sizing：border-box; *,*::before,*::after{box-sizing:border-box} ... npm i-保存fs-ui-k
Vue多组件仓库开发与发布详解
10-17
本文将深入探讨如何使用Vue.js构建多组件仓库，并详细介绍其开发流程、自动化脚本的编写以及最终的发布流程。 #### 一、项目结构搭建 **1. 项目创建：** - 使用`vue-cli`工具创建一个新的Vue项目作为基础模板。这...
vue基本使用–refs获取组件或元素的实例
01-19
使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods 添加ref属性 这是H1 <hello ref=ho></hello> <...
vue 使用fs_node.js中常用的fs文件系统
weixin_39942637的博客
12-19 7414
fs文件系统模块对于系统文件及目录进行一些读写操作。模块中的方法均有异步和同步版本，例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync()。异步的方法函数最后一个参数为回调函数，回调函数的第一个参数包含了错误信息(error)。建议大家使用异步方法，比起同步，异步方法性能更高，速度更快，而且没有阻塞。创建文件fs.writeFile(filenam...
devserver配置_vue的多页面配置
weixin_39885166的博客
11-25 770
由于项目需求将vue改造成多页面，简单记录下改造的过程，以及如何使用。如何使用项目git clone url克隆项目到本地在src/pages文件夹下，所有的页面都在pages下编写，新建一个目录(开发项目名称)demo，在demo中新建一个demo.js,demo.html,demo.vue,router/index.js这是一个单独文件的所有文件，每一个目录相当于一个项目需求，是一个单独分开的...
vue json解析_分享：一步一个脚印，vue入门之使用mockjs搭建vue项目测试服务器
weixin_39846089的博客
12-03 191
在以前的文档中，我们构建了vue项目的整体架构，详见vue入门：vue项目架构设计起步，现在我们主要对其中的mock server 进行完善。一、概述前后端分离的项目优点之一就是可以前后端并行开发，互不影响。那么在后端接口没有完成之前，我们怎么进行前端项目的测试呢，这就需要我们自己构建一个前端测试服务，自己模拟假数据，以便于我们的前端开发工作。这里我主要是应用mockjs做的mock server...
vue中组件的导出导入_全栈之路：vue-cli3 项目从搭建优化到docker部署
weixin_39602571的博客
11-21 926
上一篇，认识Docker全栈之路：前端工程师如何从 0 开始了解 Docker1. 创建一个vue项目相信大部分人都已经知道怎么创建项目的，可以跳过这一节，看下一节。1.1 安装@vue/cli# 全局安装 vue-cli脚手架npm install -g @vue/cli等待安装完成后开始下一步1.2 初始化项目vue create vue-cli3-project选择一个预设可以选择默认预设，...
使用Maven构建多模块项目【Maven】
Yang_Yvan的博客
10-28 218
在平时的Javaweb项目开发中为了便于后期的维护，我们一般会进行分层开发，最常见的就是分为domain（域模型层）、dao（数据库访问层）、service（业务逻辑层）、web（表现层），这样分层之后，各个层之间的职责会比较明确，后期维护起来也相对比较容易，今天我们就是使用Maven来构建以上的各个层。 　　项目结构如下： 　　system-parent 　　　　|----pom.xml 　　　　|----system-domain 　　　　　　　　|----pom.xml 　　　　|----system
nodejs中的fs模块在项目中的应用
骚饼
05-06 949
node中的fs模块，完成对本地文件的读写操作，更近一步完善项目当中的本地文件操作权限，拓展项目延申功能
node中fs的用法总结
热门推荐
weixin_46995731的博客
11-10 1万+
node中fs的用法总结 fs模块为nodejs的核心模块之一，主要处理文件的读写、复制、s删除、重命名等操作。当需要使用该模块时，需要先导入该文件 var fs = require('fs'); nodejs文件系统中的方法均有异步和同步两种版本，例如读取文件内容的函数有异步的fs.readFile()和同步的fs.readFileSync(). NodeJS 中，标识位代表着对文件的操作方式，如可读、可写、即可读又可写等等，在下面用一张表来表示文件操作的标识位和其对应的含义。 r：读取 w：写入 s
VUE + electron 使用fs配置
LEON_RAY
09-01 565
②elementUI的icon丢失：customFileProtocol。①使用fs：configureWebpack。
vue中怎么使用node的fs
04-24
在 Vue 中使用 Node.js 的 fs 模块需要通过配置 Webpack 来实现。具体步骤如下： 1. 首先，安装依赖： ```javascript npm install --save-dev fs-extra webpack-node-externals ``` 2. 在 webpack.config.js 中配置 externals 和 node 配置项： ```javascript const nodeExternals = require('webpack-node-externals') const path = require('path') module.exports = { // ...其他配置项 target: 'node', // 指定为 Node 环境 node: { __dirname: false, __filename: false }, externals: [ nodeExternals({ whitelist: ['vue', 'vuex', 'vue-router', /^element-ui/] }) ] } ``` 这里需要注意的是，我们需要配置 __dirname 和 __filename 为 false，因为在 Node 中这两个变量是存在的，但在 Webpack 打包后的代码中，这些变量是不存在的，所以我们需要设置为 false，否则程序运行时会抛出异常。 另外，上面配置的 whitelist 中可以添加你需要的 Node 模块和其他一些不受打包限制的模块。 3. 在 Vue 组件中使用 fs 模块： ```javascript import fs from 'fs-extra' ``` 需要注意的是，由于我们是在 Webpack 中使用 fs 模块，所以一些 Node 特有的 API 可能不支持或者使用方式有所不同，具体需要根据实际情况进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值