Vue打包路径配置过程

目录
  • Vue打包路径配置
    • 1. 配置文件
    • 2. 打包示例(npm/cnpm run build)
  • 解决打包路径配置的问题
    • 问题
    • 原因
    • 解决

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中，运行。

问题解决。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue项目打包部署的实战过程记录

    Vue项目打包部署的实战过程记录

    目录 前言 一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件 二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题 四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下

  • 解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index

  • 使用vue-cli3打包dist路径问题修改打包配置

    目录 在vue.config.js目录下配置 vue-cli3打包注意路径的问题 在vue.config.js目录下配置 module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.did

  • Vue打包路径配置过程

    Vue打包路径配置过程

    目录 Vue打包路径配置 1. 配置文件 2. 打包示例(npm/cnpm run build) 解决打包路径配置的问题 问题 原因 解决 Vue打包路径配置 1. 配置文件 module.exports = { // ...... // 相对路径都是相对于index.js所在的目录config开始的 build: { // index,assetsRoot两个路径基本不用改动,只是用于文件打包存放的路径 // index.html的路径 index: path.resolve(__dirnam

  • springboot+vue实现websocket配置过程解析

    1.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>1.3.5.RELEASE</version> </dependency> 2.配置ServerEndpointExporter @Configuration

  • vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

    参考文档 https://cli.vuejs.org/zh/ 1.安装 npm install -g @vue/cli 2.检查安装 vue -V 3.创建项目 vue create project_name 出现下图信息 4.上图两种选择方式,第一种是默认的,第二种自己选择配置  这里一般选择第二种自己配置,点击回车键后出现下图信息 5.在上图中选择你需要的模块,上下移动,空格进行确定,下图是测试选择的 6.选好后,敲Enter键,接着选择 7.选择完毕后,一路Enter,到下图 8.模板创建

  • vue打包静态资源后显示空白及static文件路径报错的解决

    今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1.记得改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. build: { index: path.resolve(__dirname, '../dist/ind

  • 解决vue+webpack打包路径的问题

    最近写了一个vue小项目,不想单独作为一个web项目发布,所以就准备放到资源项目的public文件夹下,遇到一些小问题,在此总结一下. 资源路径如下: public目录配置的访问路径为"/",在这样的情况下,我们的访问路径就变成了"域名/vue-demo".访问的时候发下程序未报错,但是页面一片空白.此前也这样发布的项目都没有问题,但这次是怎么回事呢? 仔细探索后发现是vue-router搞得鬼.因项目需要,所以使用了滚动行为,滚动行为必须开启history模式,在

  • 解决Vue打包之后文件路径出错的问题

    这里以vue-cli创建的项目为例 1.文件路径不对 找到config文件夹下的index.js文件修改一下位置 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将'/'改为'./' 2.背景图片路径不对 在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置 加入红框内字段即可. 以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了,希望能给大家一个

  • 详解Vue快速零配置的打包工具——parcel

    本文介绍了Vue快速零配置的打包工具--parcel,分享给大家,具体如下: 特性 快速打包 打包所有资源 自动转换 代码拆分 模块热替换 友好的错误记录 如何工作 Parcel 将 资源 树转换成 包(bundles) 树.许多其它的打包工具基本上是基于 JavaScript 资源,还有附加在其上的其它格式的资源.例如,在 JS 文件中内联成字符串. Parcel是对文件类型无感知的,它能按你所期待的方式那样与任意类型的资源工作,且毋须配置. 构建资源树 Parcel 接受单个入口资源作为输入

  • 如何修改Vue打包后文件的接口地址配置的方法

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案 进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的

  • vue.config.js打包优化配置

    vue.config.js打包优化配置

    百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻 优化方向 1.图片资源压缩 2.将 productionSourceMap 设为 false,map不进行生成 3.cdn配置(可选) 4.代码压缩 5.公共代码抽离(个人感觉没啥用) 未优化之前的 //感觉太大了 抬它 优化之后的 废话不多说了,上代码是重点 这些是必要的下载 /*cnpm install image-webpack-loader --save-dev c

  • 关于vue打包时的publicPath就是打包后静态资源的路径问题

    关于vue打包时的publicPath就是打包后静态资源的路径问题

    情况一 当不配置vue.config.js或者没有publicPath属性时,默认访问的静态路径是服务器的根目录 服务器根目录下没有js文件夹所以访问失败,把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了(注意重启wamp) 情况二 当配置为当前目录’./’ 访问正常,其实publicPath当前目录即打包后的index.html的当前目录,即dist目录,怎么证明,把publicPath的值设置为’…/’,看看情况三 情况三 又报错,把js,css等静态文件复制

随机推荐