Vue打包路径配置过程

 更新时间:2022年07月26日 14:33:31   作者:CodingBugs  
这篇文章主要介绍了Vue打包路径配置过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue打包路径配置

1. 配置文件

module.exports = {
  // ......
  // 相对路径都是相对于index.js所在的目录config开始的
  build: {
   	// index,assetsRoot两个路径基本不用改动,只是用于文件打包存放的路径
    // index.html的路径
    index: path.resolve(__dirname, '../dist/index.html'),
    // js,css,fonts夹等资源的路径
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 下面这种写法指定静态文件 js/css夹等与index平级
    // 指定为'/' 会打包会出现错误,最高只能指定到当前目录'./'  指定目录不存在会自动创建
    // 也就是说js,css文件夹的路径其实是上面的: '../dist' + assetsSubDirectory
    assetsSubDirectory: 'static',
    // index.html中引用资源的前缀
    // 相当于static/js/app.js的前缀 eg: ./static/js...     /static/js.....
    assetsPublicPath: '/',
	// ......
  }
}

2. 打包示例(npm/cnpm run build)

2.1 index.html

index: path.resolve(__dirname, '../dist/index.html')

index: path.resolve(__dirname, '../dist/f1/index.html')

2.2 assetsRoot, assetsSubDirectory

// 不指定 assetsSubDirectory
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: ''

// 指定 assetsSubDirectory
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static'

2.3 assetsPublicPath

assetsPublicPath: '/'

// 会自动补末尾的'/', '/temp'和'/temp/'都可以
assetsPublicPath: '/temp/'

Ps:

  • 打包出来index.html属性,路径不带双引号,可能会报错
  • meta标签没有闭合 可能会报错
  • 在打包到SpringBoot resources/static时,按第一点的默认配置打包,然后将dist下的所有文件/文件夹直接复制到resources/static下。

解决打包路径配置的问题

vue.cli3与flask或django结合时的坑

最近用vue以及flask做一个小项目,但自己是个新手出现了许多问题,其中一个就是下面都这样的。

问题

vue.cli3打包好的dist文件放入django或flask中时,会出现找不到页面的情况而出现空白页。

原因

django或flask中设置的样板文件地址都是指定的static文件夹,而vue.cli3中打包好的dist文件夹中js,css文件是分别存放于与static文件夹,index.html文件同级的js,css文件夹中,这样就导致了在flask或django中找不到了vue的样板,从而导致了出现空白页的情况。

解决

既然文件地址不对,那把文件夹移到static文件夹下再更改一下index.html文件中的样板地址不就可以了,于是按这样做了并且页面显示出来了,但页面跳转时又出错了,明明vue-route里设置对了,并且npm run serve时也通过了,为什么出现了token错误?现在还没有整明白。

这样手动改很麻烦而且也不行,于是就从打包时下手解决。如下图添加config文件。(config文件在vue.cli3中是可手动添加的文件,官网描述

然后在里面写入下面的语句:

	module.exports = {
	    assetsDir: 'static'
	}

再次打包,就会发现js,css文件都打包进了static文件中了。

再次把static文件放入flask中,运行。

问题解决。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue父组件向子组件(props)传递数据的方法

    vue父组件向子组件(props)传递数据的方法

    这篇文章主要介绍了vue父组件向子组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码,需要的朋友可以参考下
    2018-01-01
  • 如何使用 vue + d3 画一棵树

    如何使用 vue + d3 画一棵树

    这篇文章主要介绍了如何使用 vue + d3 画一棵树,本文通过文字说明加代码分析的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue中axios的get请求和post请求的传参方式、拦截器示例代码

    vue中axios的get请求和post请求的传参方式、拦截器示例代码

    Post是向服务器提交数据的一种请求,get是向服务器发索取数据的一种请求,post在真正接受数据之前会先将请求头发送给服务器进行确认,然后才真正发送数据,本文给大家介绍vue中axios的get请求和post请求的传参方式、拦截器示例代码,感兴趣的朋友一起看看吧
    2023-10-10
  • 基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

    基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

    基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率。这篇文章主要介绍了基于Vue-Cli 打包自动生成/抽离相关配置文件 ,需要的朋友可以参考下
    2018-12-12
  • vue绑定class与行间样式style详解

    vue绑定class与行间样式style详解

    这篇文章主要介绍了vue绑定class与行间样式style的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue父子组件通讯的四种方法详解

    Vue父子组件通讯的四种方法详解

    父子组件通讯是指在前端开发的组件化架构中,父组件与子组件之间互相传递数据和触发功能的一种机制,这种机制使得组件能够保持独立性的同时,也能协同工作,本文给大家介绍了Vue父子组件通讯的四种方法,需要的朋友可以参考下
    2024-07-07
  • 详解keep-alive组件缓存

    详解keep-alive组件缓存

    keep-alive是Vue中一个非常有用的特性,它可以帮助我们避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能,本文给大家介绍keep-alive组件缓存的相关知识,感兴趣的朋友一起看看吧
    2024-01-01
  • 如何启动一个Vue.js项目

    如何启动一个Vue.js项目

    这篇文章主要介绍了如何启动一个Vue.js项目,对Vue.js感兴趣的同学,可以参考下
    2021-04-04
  • vue+moment实现倒计时效果

    vue+moment实现倒计时效果

    这篇文章主要为大家详细介绍了vue+moment实现倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • Vue.nextTick纯干货使用方法详解

    Vue.nextTick纯干货使用方法详解

    这篇文章主要为大家介绍了Vue.nextTick使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论