vue cli3.x打包后如何修改生成的静态资源的目录和路径

要修改Vue Cli 3.x生成的静态资源的目录和路径,步骤如下:

  1. 打开 vue.config.js 文件,如果没有该文件则需要手动创建,该文件需要放在项目根目录下。

  2. 在该文件中添加如下代码:

module.exports = {
  publicPath: './your-path/'
}

其中,publicPath 表示静态资源的目录和路径,./your-path/ 为你想要设置的目录和路径,例如,如果希望将静态资源放在根目录下,则可以设置为 ./

  1. 在终端中输入以下命令重新打包项目,以应用修改后的配置:
npm run build

以下为两个示例:

  1. 将静态资源放在根目录下。

首先创建 vue.config.js 文件,并在其中添加以下代码:

module.exports = {
  publicPath: './'
}

然后在终端中输入以下命令重新打包项目:

npm run build
  1. 将静态资源放在 /dist/ 目录下。

首先创建 vue.config.js 文件,并在其中添加以下代码:

module.exports = {
  publicPath: './dist/'
}

然后在终端中输入以下命令重新打包项目:

npm run build

以上就是Vue Cli 3.x打包后如何修改生成的静态资源的目录和路径的完整攻略,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue cli3.x打包后如何修改生成的静态资源的目录和路径 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 简单理解vue中el、template、replace元素

    当我们使用Vue构建单页面应用,就会使用到Vue中的三个元素:el、template和replace。这三个元素常常因为其作用而被混淆,下面我将详细讲解它们的具体作用,同时会给出相应的代码示例。 el元素 el元素是Vue实例挂载的一个元素,也相当于Vue实例所控制的一个DOM元素。el元素可以是一个CSS选择器,也可以是一个实际的DOM元素。通过el元素,…

    Vue 2023年5月28日
    00
  • Vue组件基础用法详解

    下面我将详细讲解“Vue组件基础用法详解”的完整攻略。 一、Vue组件基础 在Vue中,组件是可复用的Vue实例。它们接受相同的选项(例如,data,computed,mounted),并且可以有自己的模板,方法, 以及样式。组件系统提供了一种抽象,让我们可以使用独立可复用的小组件构建大型应用程序。 二、全局注册组件 全局注册一个组件,需要使用Vue.com…

    Vue 2023年5月27日
    00
  • vue el-switch初始值(默认值)不能正确显示状态问题及解决

    Vue el-switch初始值不能正确显示状态问题及解决攻略 问题描述: vue使用element UI库中的switch组件时,如果设置了默认值,可能会出现初始状态无法正确显示的问题。 问题分析: 这个问题的原因是因为element UI中的switch并没有提供v-model来绑定value值,而是提供了v-model来绑定一个boolean值,也就是…

    Vue 2023年5月27日
    00
  • Java实现简易提款机

    我很乐意为您讲解Java实现简易提款机的攻略。 1. 需求分析 在开始编写代码之前,我们需要对我们的项目进行需求分析。根据题目要求,我们需要实现一个简易提款机,可以进行以下操作: 检查银行卡是否存在,并且余额是否足够提款 如果检查通过,则进行提款操作,并更新余额 如果检查未通过,则提示用户错误信息 2. 实现思路 基于上述要求,我们可以利用面向对象编程的思想…

    Vue 2023年5月28日
    00
  • vue-cli3添加模式配置多环境变量的方法

    介绍:vue-cli 3 是 Vue 官方提供的脚手架工具,使用 vue-cli3 可以快速搭建 Vue 项目,添加模式配置多环境变量,常用于项目的部署环境切换、前后端资源访问地址等的切换。本篇攻略介绍 vue-cli3 添加模式配置多环境变量的方法,包括两种示例说明。 准备工作 在使用 vue-cli3 添加模式配置多环境变量之前我们需要准备以下环境和工具…

    Vue 2023年5月28日
    00
  • 详解Nginx 13: Permission denied 解决方案

    下面是详解Nginx 13: Permission denied 解决方案的完整攻略。 问题描述 在使用Nginx过程中,有时候我们会遇到这样的报错:Permission denied,一般来说,这种错误出现的原因有很多种,例如: Nginx服务器没有足够的权限来操作相关文件或目录。 Nginx用户没有被设置为文件或目录的所有者或组。 SELinux等安全策…

    Vue 2023年5月28日
    00
  • vue上传图片文件的多种实现方法

    下面是关于“vue上传图片文件的多种实现方法”的完整攻略。 1. 前言 在现代Web应用程序中,上传文件是非常常见的需求之一。在Vue.js中,我们可以利用一些第三方库(如 axios 和 vue-resource)来实现上传文件的功能。本篇攻略将会探讨Vue.js中上传图片文件的多种实现方法。 2. 使用FormData对象实现上传 FormData是一种…

    Vue 2023年5月28日
    00
  • Vue.directive()的用法和实例详解

    Vue.directive() 是 Vue 中非常强大的一个特性,可以用于拓展或增强某个 HTML 元素的行为,比如增加某个元素的颜色、动画、操作等行为,可以帮助我们将复杂的业务逻辑转换成易于维护的 HTML 代码。 Vue.directive() 的基本用法 Vue.directive() 方法用于创建和注册自定义指令,语法如下: Vue.directiv…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部