总结 Vue3 的一些知识点:Vue3 项目打包

简介: 总结 Vue3 的一些知识点:Vue3 项目打包

Vue3 项目打包

打包 Vue 项目使用以下命令:

cnpm run build

复制代码

执行以上命令,输出结果如下:


执行完成后,会在 Vue 项目下会生成一个 dist 目录,该目录一般包含 index.html 文件及 static 目录,static 目录包含了静态文件 js、css 以及图片目录 images(如果有图片的话)。


如果直接双击打开 index.html,在浏览器中页面可能是空白了,要正常显示则需要修改下 index.html 文件中 js、css 文件路径。

例如我们打开 dist/index.html 文件看到 css 和 js 文件路径是绝对路径:


<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
...


我们把 js、css 文件路径修改为相对路径:


<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>
...


这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。

相关文章
|
1天前
|
JavaScript
Vue的小知识点
Vue的小知识点
7 2
|
1天前
|
JavaScript 定位技术 开发者
vue项目使用腾讯地图获取定位
vue项目使用腾讯地图获取定位
4 0
|
1天前
|
JavaScript 开发者
如何新建一个vue+vant移动端项目
如何新建一个vue+vant移动端项目
6 0
|
1天前
|
JavaScript IDE 开发工具
你的第一个Vue项目HelloWorld看这一篇就够了
你的第一个Vue项目HelloWorld看这一篇就够了
6 0
|
8天前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
25 0
|
JavaScript 索引 前端开发
vue知识点列表
vue基础 Vue 特点 Vue 实例 插值表达式 {{}} 指令: v-bind, v-if, v-for, v-model, v-on 使用组件构建应用 Vue 实力属性和方法 实例生命周期 模板语法与绑定 过滤器 Filter 计算属性 com...
1035 0
|
5天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
10天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
71 7
使用 Vue CLI 脚手架生成 Vue 项目
|
1天前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
12 6