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

我信主有天堂永生

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

**啰嗦一下：**相同域名下可能会存在两份相关或不相关的代码，需要通过切换文件夹路径进入不同项目时，需要在项目打包输出代码时设置静态文件的访问路径（vue、react都要）。这种方式可能不太好，但是确实存在这种场景。
**静态文件访问路径说明：**项目的静态文件访问路径在本地运行和服务器访问是有区别的，默认状态下服务器上的项目代码，访问路径是从服务器根目录开始。
**H5中的访问设置：**在H5中，静态文件访问路径的区别
1、服务器根目录访问：代码中书写静态文件路径时开头不加“./”。
2、访问当前文件夹：代码中书写静态文件路径时加“./”。
vue项目的静态文件访问设置：
vue项目的最终项目文件需要经过打包输出，静态文件的访问路径需要在vue.config.js文件中设置。
1、vue.config.js文件中，module.exports中没有配置publicPath属性时，默认静态文件通过服务器根目录访问。
2、vue.config.js文件中配置publicPath属性设置静态文件访问路径。

1. module.exports = {
   
2.     publicPath: './',
   
3.     devServer:{
   
4.         hot: true,
   
5.         port: 8082, // 启动端口
   
6.         open: true,  // 启动后是否自动打开网页
   
7.     },
   
8. }

复制代码

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

vue+electron 修改默认安装目录

1. 在package.json或vue.config.js文件中， 在nsis 添加

1. include

复制代码

属性：

1. module.exports = {
   
2.   pluginOptions: {
   
3.     electronBuilder: {
   
4.          win: {
   
5.           icon: './icons/icon.ico',
   
6.           target: [
   
7.             {
   
8.               target: 'nsis',
   
9.               arch: [
   
10.                 'ia32'
    
11.               ]
    
12.             }
    
13.           ],
    
14.          },
    
15.          ...
    
16.          nsis: {
    
17.           // 一键安装，如果设为true，nsis设置就无意义请直接删除 nsis 配置
    
18.           oneClick: false,
    
19.           // true全用户安装【目录为：C:\Program Files (x86)】，false安装到当前用户
    
20.           perMachine: true,
    
21.           // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
    
22.           allowElevation: true,
    
23.           // 允许修改安装目录
    
24.           allowToChangeInstallationDirectory: true,
    
25.           // 创建桌面图标
    
26.           createDesktopShortcut: true,
    
27.           // 创建开始菜单图标
    
28.           createStartMenuShortcut: true,
    
29.           // 快捷方式的名称,默认为应用程序名称
    
30.           // shortcutName: 'HX',
    
31.           // 安装图标
    
32.           installerIcon: './icons/icon.ico',
    
33.           // 卸载图标
    
34.           uninstallerIcon: './icons/icon.ico',
    
35.           // 安装时头部图标
    
36.           installerHeaderIcon: './icons/icon.ico',
    
37.           // 配置 nsn 如修改默认安装目录
    
38.           include: './installer.nsh'
    
39.         }
    
40.         ...
    
41.       }
    
42.     }
    
43.   }
    
44. }
    

复制代码

2. 根目录新建

1. installer.nsh

复制代码

文件：

1. [code]installer.nsh

复制代码

一般和

1. vue.config.js

复制代码

为同级目录[/code]

1. [code]D:\Program Files (x86)

复制代码

为定义安装目录，可修改 [/code]

1. [code]${PRODUCT_NAME}

复制代码

为应用名称变量，一般没不需要改 [/code]

1. !macro preInit
   
2.   SetRegView 64
   
3.   WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\Program Files\${PRODUCT_NAME}"
   
4.   WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\Program Files\${PRODUCT_NAME}"
   
5.   SetRegView 32
   
6.   WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\Program Files (x86)\${PRODUCT_NAME}"
   
7.   WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\Program Files (x86)\${PRODUCT_NAME}"
   
8. !macroend

复制代码

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

来源:https://www.jb51.net/javascript/316249kcu.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！