vue项目设置打包后的静态文件访问路径

2024-03-01 0 550
目录
  • vue项目设置打包后的静态文件访问路径
  • vue+electron 修改默认安装目录

vue项目设置打包后的静态文件访问路径

**啰嗦一下:**相同域名下可能会存在两份相关或不相关的代码,需要通过切换文件夹路径进入不同项目时,需要在项目打包输出代码时设置静态文件的访问路径(vue、react都要)。这种方式可能不太好,但是确实存在这种场景。

**静态文件访问路径说明:**项目的静态文件访问路径在本地运行和服务器访问是有区别的,默认状态下服务器上的项目代码,访问路径是从服务器根目录开始。

**H5中的访问设置:**在H5中,静态文件访问路径的区别1、服务器根目录访问:代码中书写静态文件路径时开头不加“./”。2、访问当前文件夹:代码中书写静态文件路径时加“./”。

vue项目的静态文件访问设置:vue项目的最终项目文件需要经过打包输出,静态文件的访问路径需要在vue.config.js文件中设置。1、vue.config.js文件中,module.exports中没有配置publicPath属性时,默认静态文件通过服务器根目录访问。2、vue.config.js文件中配置publicPath属性设置静态文件访问路径。

module.exports = {
publicPath: \’./\’,
devServer:{
hot: true,
port: 8082, // 启动端口
open: true, // 启动后是否自动打开网页
},
}

vue项目设置打包后的静态文件访问路径

publicPath属性值为“./”时表示静态文件的引入路径为当前文件夹,设置之后,可以将整个项目代码随便移动文件夹位置而不影响静态文件的访问。

补充:

vue+electron 修改默认安装目录

1. 在package.json或vue.config.js文件中,在nsis 添加include属性:

module.exports = {
pluginOptions: {
electronBuilder: {
win: {
icon: \’./icons/icon.ico\’,
target: [
{
target: \’nsis\’,
arch: [
\’ia32\’
]
}
],
},

nsis: {
// 一键安装,如果设为true,nsis设置就无意义请直接删除 nsis 配置
oneClick: false,
// true全用户安装【目录为:C:\\Program Files (x86)】,false安装到当前用户
perMachine: true,
// 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
allowElevation: true,
// 允许修改安装目录
allowToChangeInstallationDirectory: true,
// 创建桌面图标
createDesktopShortcut: true,
// 创建开始菜单图标
createStartMenuShortcut: true,
// 快捷方式的名称,默认为应用程序名称
// shortcutName: \’HX\’,
// 安装图标
installerIcon: \’./icons/icon.ico\’,
// 卸载图标
uninstallerIcon: \’./icons/icon.ico\’,
// 安装时头部图标
installerHeaderIcon: \’./icons/icon.ico\’,
// 配置 nsn 如修改默认安装目录
include: \’./installer.nsh\’
}

}
}
}
}

2. 根目录新建installer.nsh文件:

installer.nsh一般和vue.config.js为同级目录

D:\\Program Files (x86)为定义安装目录,可修改

${PRODUCT_NAME}为应用名称变量,一般没不需要改

!macro preInit
SetRegView 64
WriteRegExpandStr HKLM \”${INSTALL_REGISTRY_KEY}\” InstallLocation \”D:\\Program Files\\${PRODUCT_NAME}\”
WriteRegExpandStr HKCU \”${INSTALL_REGISTRY_KEY}\” InstallLocation \”D:\\Program Files\\${PRODUCT_NAME}\”
SetRegView 32
WriteRegExpandStr HKLM \”${INSTALL_REGISTRY_KEY}\” InstallLocation \”D:\\Program Files (x86)\\${PRODUCT_NAME}\”
WriteRegExpandStr HKCU \”${INSTALL_REGISTRY_KEY}\” InstallLocation \”D:\\Program Files (x86)\\${PRODUCT_NAME}\”
!macroend

到此这篇关于vue项目设置打包后的静态文件访问路径的文章就介绍到这了,更多相关vue静态文件访问路径内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • vue部署后静态文件加载404的解决
  • Vue读取本地静态文件json的2种方法以及优缺点
  • Vue3.0静态文件存放路径与引用方式
  • Vue 打包的静态文件不能直接运行的原因及解决办法
  • vue@cli3项目模板怎么使用public目录下的静态文件
  • vue在index.html中引入静态文件不生效问题及解决方法
  • vue完成项目后,打包成静态文件的方法
  • 关于Vue背景图打包之后访问路径错误问题的解决

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript vue项目设置打包后的静态文件访问路径 https://www.u-9.cn/biancheng/javascript/181835.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务