vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath

这篇具有很好参考价值的文章主要介绍了vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


1、打包前的配置工作

1.1、使用vue自带的打包工具(vue-cil)

配置vue.config.js文件

打开vue.config.js文件修改参数,如果项目的目录中没有vue.config.js文件,那么需要自建一个配置文件;在根目录src下创建文件即可。需注意文件名称必须是vue.config.js,然后在文件中写入代码。

// 打包配置文件
module.exports = {
	assetsDir: 'static',
	parallel: false,
	// 默认
	// publicPath: '/',
	// 打包时使用
	publicPath: './',
};

☺☺☺☺☺☺☺
配置router/index.js文件

const router = new VueRouter({
	// 默认
	// mode: 'hash',
	// 打包时使用
    mode: 'history',
    routes
});

以上的配置不能混淆,混淆会报错。默认配置针对的是本地启动项目,如果本地启动使用了打包时的配置直接报错。如果打包时使用了默认配置,那么打包的代码也不能正常使用,可能报错或者页面空白,页面空白但不报错的情况也会发生。总之配置需要一一对应,只要有一个地方不对应就会出问题。


1.2、使用webpack工具打包

需要在config中的index.js文件里面把assetsPublicPath: '/'改为assetsPublicPath: './'

2、打包

配置完成之后,打开控制台,输入打包命令npm run build开始打包。如果没有报错的前提下会生成一个名为dist的文件夹,反过来说就是如果生成dist文件夹,说明打包没问题。dist文件夹就是我们需要的包,随后放到服务器部署上线即可。文章来源地址https://www.toymoban.com/news/detail-769610.html

到了这里,关于vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • springboot项目中引入本地依赖jar包,并打包到lib文件夹中

    描述:下载了第三方相关jar包后,项目中引入本地jar,测试环境正常,打包线上报错提示为找到该jar 原因:应该在/WEB-INF/lib/xxx.jar,被打包到此目录:/WEB-INF/classes/lib/xxx.jar 引入jar包后,在此pom.xml文件中里面添加依赖坐标,即添加中内容 在pom的 build/ build标签中还需进行如下修

    2024年02月07日
    浏览(52)
  • springboot项目中引入本地依赖jar包,如何打包到lib文件夹中

    前言: 工作中,碰到过springboot框架构建的java web项目,需要集成第三方推送功能,于是使用到了小米推送服务,下载了相关jar包。项目中引入本地jar,问题不大,编写完代码后,通过测试类测试,也没问题。然后就准备打包部署到开发服上。由于项目是通过tomcat部署的,所以

    2024年02月11日
    浏览(55)
  • GameFramework:打包资源,打随app发布包,打包生成文件夹说明,上传资源至服务器,下载资源,GameFreamworkList.dat 与GameFrameworkVersion.dat

    左边为ab包,中间为ab包中内容,右边为项目中资源文件 点击save,SaveConfiguration,保存打包关系到ResourceCollection.xml中 是否使用文件系统,只能在xml中手动配置,代表下载完后会把几个零散的ab文件合成一个文件 1、AssetBundle 列表 AssetBundle列表(AssetBundle List)列出了项目中包含

    2023年04月08日
    浏览(59)
  • 群晖Synology Drive同步文件时过滤指定文件夹“dist“, “node_modules“

    安装Synology Drive 创建同步任务 修改Synology Drive配置 打开 /Users/[用户名]/Library/Application Support/SynologyDrive/data/session/[同步任务序号,第一个同步任务就填1,第二个同步任务就填2]/conf/blacklist.filter 文件 在文件中找到 [Directory] ,添加要过滤的文件夹/目录。 安装Synology Drive 创建同

    2024年01月21日
    浏览(88)
  • 解决创建的vue项目没有router,view文件夹

    出现问题如图,没有router,view等文件夹 错误原因:创建的vue项目没有router,view文件夹是因为创建项目时的 Please pick a preset: 这个问题选错了,也就是第一个问题 如图所示,选择第三个 接下来的很多选择如图(不详写) 之后创建出来的就有了 ,如图

    2024年02月12日
    浏览(58)
  • 《基于 Vue 组件库 的 Webpack5 配置》6.将字体库和图片等静态资料,编译后打包至指定文件夹

    参考 Rule.generator.filename package.json 的配置如下

    2024年02月11日
    浏览(77)
  • vue前端获取项目下的静态资源文件夹中的文件并下载

    前端项目/public/static/image文件夹下,两张图片,因为不会经常改变所以做成静态资源 从项目中获取这两张图片 html: 前端项目的 publicstaticfaultFile文件夹中放入模板文件: 实现效果: 代码: 前端下载使用 a 标签的自带的download下载 参考文章:require.context()的用法详解

    2024年02月12日
    浏览(79)
  • 怎么快速卸载Vue项目里的node_modules文件夹

            因为平时装依赖的时候,有可能会报错怎么不管用的时候,就需要把node_modules文件夹删了重新intall一下,但是直接删的话会要管理员权限,或者各种问题,这个时候就可以使用一个工具来解决 rimraf         用 rimraf 来卸载的话还是非常快的,亲测比直接shift+Dele

    2024年02月11日
    浏览(56)
  • vue3+vite+ts项目搭建之后,vscode文件夹下红色波浪线问题

            搭建完vue3+vite+ts项目之后,用vscode打开项目,发现 .vue 文件和 main.ts 文件夹下都有红色破浪线(如下图所示)。几番周折终于解决了这个问题。 1. 解决.ts文件报错 报错原因:ts不识别.vue后缀的文件。 解决方式:创建脚手架的时候,项目的根目录下会生成一个en

    2024年02月04日
    浏览(53)
  • 如何从多个文件夹内转移全部文件(忽略文件夹的结构)(进行复制)(再打包)

    首先,需要用到的这个工具: 百度 密码:qwu2 蓝奏云 密码:2r1z 04文件夹里面有只有1个名称为\\\"1\\\"的文件夹,“1”里面有“2”,“2”有“3”,“3”有“4”,从“1”开始,都有5个兔兔的图片,这是“1”里面的文件夹结构,现在要做的就是忽略文件夹结构,提取出全部的兔兔

    2023年04月10日
    浏览(97)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包