3.x vue cli 打包遇到的路径没有build文件夹之类的问题

** 最近比较闲,学习了一下vue,玩的很开心,开发完成的代码也扔nginx里跑起来了,这时就想,把vue打包生成的代码,放到现有的项目里要怎么做呢。于是,遇到特别简单又讨厌的路径问题。**

1.首先,简单说下创建vue项目的过程

工具:用的是HbuilderX,就是在vue官网点哪个不知名的链接下载的,不过还挺好用的。
然后npm,cnpm之类的自己去准备好了,网上有很多文章之类,这里就不多唠了。
本人参考的是:https://www.runoob.com/nodejs/nodejs-npm.html

  1. 创建项目:
    像下面这样选
    在这里插入图片描述
  2. 项目目录
    下图请忽略,红框里的内容,刚建完是没有的。
    在这里插入图片描述
  3. 写代码运行
    本人写了editor组件,就想试试mavon-editor这个markdown编辑器效果跟wangeditor对比一下。
    效果确实不错,跟csdn的markdown编辑器一样。
    想要源码的,可以留言,也可自行百度。
    运行:
    在这里插入图片描述
    效果:
    在这里插入图片描述

2.如果想把用vue开发的编辑器应用到现有项目应该怎么做

重点来了,自我感觉挺好看的,想用到现有项目里,但是,运行npm run build 生成的dist文件夹中index.html中引用的js都是/,而我想拼上更多的东西,比如我现有项目的目录什么的。
网上找的文章基本都是有builder文件夹,builde.js什么的,很不巧,我这最新版没有。后来找到官网才找到说明。
官网:https://cli.vuejs.org/config/
在这里插入图片描述
这里基本说的是,vue.config.js已经变为了可选的配置,如果需要就自己新建。
在这里插入图片描述
讲上面的三句话读完,基本找到答案了,于是就有了我上面目录那张图里新建的vue.config.js
配置如下:

module.exports = {
    publicPath : '/mbyd/'
}

然后重新运行build后,查看index.html
在这里插入图片描述
写到这里,讲真,真心觉得前端的东西说明或者文章实在太少了。真心希望前端的大神们,拿出点功夫简单写写,讲讲。java后台框架一搜一大堆,前端的框架一搜一个样,脑壳疼。

  • 12
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值