Vue项目中对index.html中BASE_URL的配置方式

目录
  • Vue项目对index.html中BASE_URL的配置
    • 问题
    • 解决
  • Vue项目url中的＜%= BASE_URL %＞

Vue项目对index.html中BASE_URL的配置

问题

有时候后端配置资源的默认访问路径的时候，可能会与前端打包时配置的默认根路径有所差异

比如：后端要访问静态资源的根路径为/static，而一般情况下，我们项目的vue.config.js中对BAES_URL的配置是/，或者不做配置，因为它默认的值也是/

这个路径决定了我们的前端项目打包后获取静态资源的默认的根路径（不显示在代码中），同时，这个路径也在public/index.html中有明显的引用，大多时候都会看到如下的代码：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>logo.png" rel="external nofollow" >
    <title>xxxx</title>
  </head>
  <body>
  	<div>.......</div>
  </body>
</html>

那么，我们应该如何去修改这个BAE_URL的值呢？

解决

通过 vue-cli3 官方文档的查阅，发现：

所以，显而易见，如果想修改 BASE_URL，

Vue CLI 3.3 之前的版本，配置：baseURl: '/static'

Vue CLI 3.3 之后（包括3.3）的版本，配置：publicPath: '/static'

因为这个值在开发环境下同样生效，所以说这么一改打包后是没问题了，但自己的项目运行起来却会报错，官方也给出了方案。很简单，只需要判断一下当前环境是生产环境还是开发环境，再应用不同的路径就可以了。如下：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/static/'
    : '/'
}

注意：

还需要注意的一个问题是，当我们修改了publicPath 之后，如果我们对路由的配置是像下面这样：

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap.concat(asyncRouterMap)
})

可以看到路由的基础路径跟 BASE_URL 即 publicPath 是相同的。

如果保持原来的配置，那么所有的路由都会带上多余的前缀，如:/static/home

修改方式也很简单，如下：

Vue.use(Router)
export default new Router({
  mode: 'history',
  // base: process.env.BASE_URL,
  base: '/',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap.concat(asyncRouterMap)
})

将base属性重置为/即可

Vue项目url中的＜%= BASE_URL %＞

vue-cli 创建的一个项目中执行命令 vue inspect > output.js 将 vue-cli 中 webpack 的配置信息导出到 output.js 文件，会有一段代码：

 new DefinePlugin(
     {
       'process.env': {
         NODE_ENV: '"development"',
         BASE_URL: '"/"'
       }
     }
   ),

在 webpack 中全局声明了 BASE_URL 这个变量为项目根目录。

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

赞 (0)

相关推荐

  • vue.js根据代码运行环境选择baseurl的方法

    配置通用的API前缀可以更好在本地通过接口代理转发获取数据.或者部署时在Nginx中做反向代理,但是项目中一旦涉及大量的需要文件上传的部分(文件上传不走Ajax的方法),我们需要考虑更好管理接口的baseURL,项目中 Ajax 请求用 axios ,原始代码如下 修改前 // 创建axios实例.配置baseURL.超时时间 const service = axios.create({ baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的bas

  • vue跨域处理方式(vue项目中baseUrl设置问题)

    vue跨域处理方式(vue项目中baseUrl设置问题)

    目录 vue跨域处理(baseUrl设置问题) 一.方法一 二.方法二 三.方法三 vue请求不同的域名,baseURL配置 vue跨域处理(baseUrl设置问题) 一.方法一 在公用文件common.js中设置baseUrl export var baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/api' 该方法的优点:在项目打包时,static下面的文件是不会被webpack处理的,所以可以通过改变s

  • Vue 简单配置公用接口地址方式

    目录 简单配置公用接口地址 首先配置 package.json 文件下的配置 .env.build 和 .env.test 文件 vue.config.js 文件配置 vue接口路径配置 创建文件 axios获取json文件内容 简单配置公用接口地址 有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 npm run build 判断 首先配置 先新建一个 config.js 的文件 开发环境: 说明在本地测试的时候链接的地址 测试环境: 说明是根据 npm run test 进行判断

  • Vue项目打包后可修改基础接口地址配置的具体操作

    Vue项目打包后可修改基础接口地址配置的具体操作

    目录 一.目的 二.具体操作实现 总结 一.目的 最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创

  • Vue项目中对index.html中BASE_URL的配置方式

    Vue项目中对index.html中BASE_URL的配置方式

    目录 Vue项目对index.html中BASE_URL的配置 问题 解决 Vue项目url中的<%= BASE_URL %> Vue项目对index.html中BASE_URL的配置 问题 有时候后端配置资源的默认访问路径的时候,可能会与前端打包时配置的默认根路径有所差异 比如:后端要访问静态资源的根路径为/static,而一般情况下,我们项目的vue.config.js中对BAES_URL的配置是/,或者不做配置,因为它默认的值也是/ 这个路径决定了我们的前端项目打包后获取静态资源的默认的

  • vue项目部署到Apache服务器中遇到的问题解决

    最近刚重构完,我们的一个项目,由原来的jsp模式改为了前后端分离,前端选型为vue,开发完成之后第一件时间就是要部署测试,服务端选的是Apache.本来以为很简单的一件事情,几经坎坷部署了两天才算能够正常访问了.先记录如下, 过程搭建Apache环境,vue项目build之后把生成的dist文件放到,Apache下面,启动Apache之后本以为能够正常访问了, 前提说下:vue项目路由model:history ,默认不会出现下面的问题,因为个人感觉项目路径中带个#实在难受 但是发现错误如下:

  • vue项目实现通过ip地址访问和localhost访问方式

    vue项目实现通过ip地址访问和localhost访问方式

    目录 vue项目通过ip地址访问和localhost访问 vue项目中把localhost改成ip地址访问 vue2.0项目中 localhost改成ip地址访问 vue3项目改成ip地址访问 vue项目通过ip地址访问和localhost访问 为了实现vue项目启动服务,多个人可以查看,别人可以通过ip+端口访问 在config文件下的index.js文件中,修改host为: host: '0.0.0.0', 或者在package.json文件下"scripts"的"dev

  • ubuntu中利用nginx部署vue项目的完整步骤

    ubuntu中利用nginx部署vue项目的完整步骤

    目录 1.安装nginx 2.打包上传vue项目到服务器 配置nginx 访问vue项目 常见错误 总结 1.安装nginx 更新源列表 apt-get update 安装nginx apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 启动nginx server nginx restart 在浏览器输入ip地址,若出现如下页面则启动成功 2. 打包上传vue项目到服务器 打包 我的项目使用的是vs code,在终端输入如下

  • Vue项目中如何引入icon图标

    1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角"IcoMoon App",找到自己需要的图标后选择然后点击右下角"Generate Font",接着可以在左上角第二个按钮"Preferences"进行自定义你要下载的图标信息,一般我都是进去改一下"Font Name",然后返回点击右下角"Do

  • vscode下vue项目中eslint的使用方法

    前言 在vscode的vue项目中,关于代码检查和格式化,遇到各种各样的问题,比如: 不清楚安装的拓展的功能,导致安装了重复功能的拓展 右键格式化文档的时候,不是按eslint的规则来格式化,导致需要我再次手动调整 保存时不能自动修复代码 以下通过自己的实践,进行了相应配置,目前可以实现: 仅安装2个推荐的拓展 右键格式化文档按照eslint规则,不会产生错误 保存时自动修复代码 vscode 拓展安装 eslint 拓展 该拓展本身不带任何插件,当前项目要使用该拓展,需要安装相应的npm包(全

  • yii的入口文件index.php中为什么会有这两句

    yii的应用模板中,index.php中 前面会有这两句 <?php // comment out the following two lines when deployed to production defined('YII_DEBUG') or define('YII_DEBUG', true); defined('YII_ENV') or define('YII_ENV', 'dev'); 当部署到生产环境时,注释掉下面两行,上面的注释是这样说的. 但经过团队开发和部署环境的人,都知道,

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • 前端Vue项目详解--初始化及导航栏

    前端Vue项目详解--初始化及导航栏

    一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your cod

随机推荐