Vue在外部配置打包文件夹名称和url地址前缀

在public中添加以下两个js文件

config_build.js:

module.exports = {

    //打包文件夹名
    OUTPUT_DIR: 'test',

    //浏览器url地址前缀。需要同步更改config_settings.js中的ROUTE_PREFIX
    ROUTE_PREFIX: '/test/'
}

vue.config.js:

const config_build = require('./public/config_build')

module.exports = {
    publicPath: config_build.ROUTE_PREFIX,
    outputDir: config_build.OUTPUT_DIR,
}

config_settings.js:

window.config_settings = {
    //浏览器url地址前缀。需要同步更改config_build.js中的ROUTE_PREFIX
    ROUTE_PREFIX: '/test/',
}

注意：在npm run build打包之前，需要先配置以上文件，使打包内容生效

1、配置浏览器地址前缀，需要修改同时修改config_build.js中的ROUTE_PREFIX和config_settings中的ROUTE_PREFIX，并且这两个值需要保持一样。

  • http://localhost:8080               则 ROUTE_PREFIX:"" 或ROUTE_PREFIX:"/"
  • http://localhost:8080/test        则 ROUTE_PREFIX:"/test"
  • http://localhost:8080/test/a     则 ROUTE_PREFIX:"/test/a"

2、配置打包文件夹名称，只需配置config_build中的ROUTE_PREFIX即可。

3、如果打包出来的项目是放在Apache中，一定要记得添加.htaccess文件，防止刷新报404错误。参考：

Vue.js项目在apache服务器部署问题

造成原因vue 路由的URL有两种模式，一种是 hash，一种是history ，history 模式更好看一些，并且这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。在使用hisory模式时，由于地址并不是真实存在，那么在刷新的情况下，这个会报404错误。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

其中，如果

  • http://localhost:8080               则 RewriteRule . /index.html [L]
  • http://localhost:8080/test        则 RewriteRule . /test/index.html [L]
  • http://localhost:8080/test/a     则 RewriteRule . /test/a/index.html [L]

到此这篇关于Vue在外部配置打包文件夹名称和url地址前缀的文章就介绍到这了,更多相关Vue打包文件夹名称和url地址前缀内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3无config文件夹打包后页面空白问题及解决

    vue3无config文件夹打包后页面空白问题及解决

    目录 vue3无config文件夹打包后页面空白 项目场景 场景1:vue2有config文件夹 场景2:vue3无config文件夹 目录结构没有config文件夹 解决方案 vue3无config文件夹打包后页面空白 项目场景 项目场景:vue文件打包之后页面空白(全) 场景1:vue2有config文件夹 找到config文件夹下的index.js文件,将 assetsPublicPath: "/"改为assetsPublicPath: "./" 原理: 打包

  • vue 打包后找不到dist文件夹的解决方案

    vue 打包后找不到dist文件夹的解决方案

    目录 打包后找不到dist文件夹 运行vue打包后的dist文件夹下的项目 需要安装http-server 通过命令行进入到dist文件夹 打包后找不到dist文件夹 接受一个别人做了一半的项目  , 结果要打包测试的时候  执行npm run build 后 没有dist 文件 看了一下 config文件夹里面的index.js 文件 的build对象, 原来是默认的打包路劲被修改了 , 修改回来就好了, __dirname是获取当前位置的绝对路径 运行vue打包后的dist文件夹下的项目 需

  • Vue在外部配置打包文件夹名称和url地址前缀

    Vue在外部配置打包文件夹名称和url地址前缀

    在public中添加以下两个js文件 config_build.js: module.exports = { //打包文件夹名 OUTPUT_DIR: 'test', //浏览器url地址前缀.需要同步更改config_settings.js中的ROUTE_PREFIX ROUTE_PREFIX: '/test/' } vue.config.js: const config_build = require('./public/config_build') module.exports = { p

  • 如何配置vue.config.js 处理static文件夹下的静态文件

    最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大:呃呃....(ps:就想给自己找点别扭) 回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据: fetch("../static/test.json") .then(res => res.json()) .then(res => { //获取到

  • Vue-cli配置打包文件本地使用的教程图解

    最近做的一个嵌入app的pc端项目,用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件,打包后的index.html加载文件如图: url中的路径据我们所知,最前面为一个反斜杠(/XX),表示从网站根目录开始搜索文件,如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头,看来是打包后的文件路径有问题 于是就去找webpack.base.conf.js文件,有个output选项,output是webpack中对输出文件的配置,最常用

  • linux下用renameTo方法修改java web项目中文件夹名称的实例

    经测试,在Linux环境中安装tomcat,然后启动其中的项目,在项目中使用java.io.File.renameTo(File dest)方法可行. 之前在本地运行代码可以修改,然后传到Linux服务器上一直无法实现功能,自己一直在捣鼓,以为是window环境和Linux环境不同的原因导致,后面发现在项目中使用renameTo方法修改文件夹名称不行是因为之前改了java web项目中的js,在js中传入值到后台,后台根据值来修改文件夹名称.由于没清除缓存导致js中的代码没有刷新,所以一直出现错

  • Python打包文件夹的方法小结(zip,tar,tar.gz等)

    本文实例讲述了Python打包文件夹的方法.分享给大家供大家参考,具体如下: 一.zip import os, zipfile #打包目录为zip文件(未压缩) def make_zip(source_dir, output_filename): zipf = zipfile.ZipFile(output_filename, 'w') pre_len = len(os.path.dirname(source_dir)) for parent, dirnames, filenames in os.

  • vue实践---根据不同环境,自动转换请求的url地址操作

    一般的项目环境分为:本地环境,测试环境,预发环境,正式环境. 这些环境的域名一般是一样的, 前端请求接口的url也会随着这些环境的变化而改变,手动修改有点麻烦,所以想个办法,让请求的地址根据域名改变而改变. 第一步: 建立一个RequestConfig.js 作为配置文件,内容如下: const APIMapping = { project1: { test: 'http://123.com', local: 'http://abc.com' }, project2: { test: 'http

  • Vue项目如何获取本地文件夹绝对路径

    目录 一.前端代码 1.弹框样式代码 2.导入方法(不要忘记了导入方法和data定义) 3.方法区代码 4.api接口中的config.js代码 二.后端代码 controller层代码 service接口interface service层代码impl 总结 Vue项目,实现获取本地的绝对文件夹路径的解决方案 一.前端代码 vue项目下的index中代码如下 1.弹框样式代码 <el-dialog title="" :append-to-body="true"

  • vue如何获取配置代理文件中的api地址值

    vue如何获取配置代理文件中的api地址值

    目录 获取配置代理文件的api地址值 带你了解vue中的API 全局API Vue 实例中的选项 实例属性与方法 特殊的属性 获取配置代理文件的api地址值 一般vue项目中,前后端服务接口调试数据,需要配置api的代理.在代理文件config/index.js中,配置 后台服务的IP地址.如图. 如果想在某个页面上查看,代理的该IP地址. 则在该页面上引入配置文件,在找到对应的值. 引入 import API_CONFIG from "../../../config/index.js"

  • Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题)

    目录 一.问题描述及解决方案 1. 多入口存在的问题 2. 我的预期效果 3. 可行方案 二.方案一:打公共 chunks,单独分离各自的ui库 三.方案二:删除默认splitChunk配置,抽离公共资源 四.方案对比 总结 通常我们使用vue-cli开发多页面的时候,不知道您是否注意一个问题没有? 默认情况:webpack 会将多入口通用的组件库等,打包一个 vendor 的 chunk js 中 现在假设有两个页面: 入口 admin 使用到了element-ui组件库和echarts图表库

  • php Rename 更改文件、文件夹名称

    php Rename 更改文件、文件夹名称

    命令格式为: bool rename ( string oldname, string newname [, resource context] ) 下面演示rename的具体应用: 文件位置如图:目的:1.把cache.txt 更名为rename.txt; 2.将cache2.txt更名为cache3.txt 3.将html目录 更名为 cache 4.将file目录转移到html目录下(可以实现更名) 代码实现(有错误): 复制代码 代码如下: <?php $file = "html/

随机推荐