• 售前

  • 售后

热门帖子
入门百科

详解Vue项目的打包方式

[复制链接]
一心之恋祭 显示全部楼层 发表于 2022-1-8 05:08:28 |阅读模式 打印 上一主题 下一主题
目次


  • 一、干系设置

    • 情况一(使用的工具是 vue-cil)
    • 情况二(使用的工具是 webpack)

  • 二、打包
  • 总结

一、干系设置


情况一(使用的工具是 vue-cil)

假如是用 vue-cli 创建的项目,则项目目次中没有 config 文件夹,以是我们须要自建一个设置文件;在根目次 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码:
  1. //打包配置文件
  2. module.exports = {
  3.   assetsDir: 'static',
  4.   parallel: false,
  5.   publicPath: './',
  6. };
复制代码
结构如下:


情况二(使用的工具是 webpack)

假如使用的是 webpack,则直接在 config 中 index.js 文件下修改 webpack 设置:
  1. assetsPublicPath: './'
复制代码
结构如下:


二、打包

设置完成之后,调起控制台,输入打包下令 npm run build 开始打包;

成功后会有如下提示;

且会在项目目次主动天生 dist 文件夹;

dist 文件夹就是我们须要的包,随后放至服务器摆设上线即可;须要注意打包之后无论在项目中做了何种修改,都须要 npm run build 重新打包。

总结

本篇文章就到这里了,希望可以或许给你带来帮助,也希望您可以或很多多关注草根技术分享的更多内容!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作