vue打包之后,放到服务器上访问不到static文件夹下面的html文件,该如何解决

​以前都是和团队合伙开发前端,从不接触设置打包配置项。现在公司前端一个人,要自己学会配置。最近写公司官网,vue文件打包之后,在项目里面通过 window.open()访问放在static下的html文件,放在公司服务器访问不到static下面的文件,问题出现在打包配置项上。

vue组件里面使用:window.open("/static/pro/protocol_privacy.html"); // 错误的写法

因为我打包配置不是在根目录下(/),而是放在/home/(这个与项目放在服务器上的目录相同,必不可少)目录下,所以访问静态页面时缺少东西

注意:打包assetsPublicPath配置项一定要和存放服务器上的路径一样

解决办法:window.open("/home/static/pro/protocol_privacy.html"); // 正确的写法

以上是打包出现的问题,以及解决办法

然后你会发现另一个问题,虽然把访问静态文件路径变了,线上可以访问,但是本地访问不了,问题也是出现在配置项上

解决办法:既可以在线上访问,又可以本地访问,需要判断开发环境

 const v = process.env.NODE_ENV == "development" ? '' : '/html' 

 window.open(v + "/static/pro/protocol_privacy.html");

如果您觉得我能帮到您,希望您可以给我一个免费的点赞支持一下,谢谢

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目打包之后,可通过使用`http-server`工具来在本地验证是否有问题,这是因为`http-server`会以本地服务器的方式运行项目。然而,当将打包后的代码放到实际的服务器上时,可能会出现`SyntaxError: Unexpected`这样的错误。 这个错误通常表示在代码中存在语法错误。在本地验证时可能没有出现这个错误,是因为本地环境与服务器环境可能存在差异。以下是一些可能导致该错误的原因: 1. 服务器版本问题:打包后的代码可能使用了一些新的语法或特性,而服务器的Node.js版本可能较旧,无法解析这些新特性。可以尝试升级服务器的Node.js版本,或在部署前对代码进行更高版本的转译或编译。 2. 缺少依赖:有时,打包后的代码引用了本地开发环境中安装的依赖项,但在服务器上未安装或者安装的版本不匹配。确保在服务器上正确安装所有的依赖项,并且它们的版本与本地开发环境一致。 3. 文件路径问题:在本地验证时,`http-server`可以正确解析文件路径,但服务器可能对文件路径解析方式有所不同。尝试检查打包后的代码中的文件路径是否与服务器上的文件路径匹配。 解决这个问题的方法包括: 1. 确保服务器的Node.js版本与打包后的代码的要求兼容。 2. 安装服务器上所需的依赖项,并确保它们的版本与本地开发环境一致。 3. 检查打包后的代码中的文件路径是否与服务器上的文件路径匹配。 通过排除以上问题,你应该能够解决`SyntaxError: Unexpected`的问题,并成功部署打包后的Vue应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值