Vue2 笔记项目遇到的一些问题

Hello_Tang
145 阅读2分钟

问题一

  • 在做登录接口测试时，调用登录接口输入用户名和密码提示登录成功，但当再次调用auth接口判断用户是否登录时却提示登录失败。
  • 跨域请求时采用CORS跨域，后端已设置好允许跨域，前端也在axios里设置了axios.defaults.withCredentials = true
  • 浏览器报错如下 微信图片_20230426194539.png

原因

chrome在2020年3月份升级了安全策略，对于跨域请求如果想写入cookie，必须是https的网站才可以。对于http的网站，cookie写入总是失败。

解决办法

配置 webpack-dev-server，在开发时使用https的链接。以下是操作说明：

第一步
修改build/webpack.dev.conf 文件，在devServer里添加https: true, 如下图

image.png

第二步
执行 npm start， 浏览器输入 https://localhost:8080 。注意是https， 不是 http。
此时并不能打开页面，而是显示如下

image.png

解决：就是在当前页面用键盘输入 thisisunsafe ，不是在地址栏输入，就直接敲键盘就行了，页面即会自动刷新进入网页。
因为Chrome不信任这些自签名ssl证书，为了安全起见，直接禁止访问了，thisisunsafe 这个命令，说明你已经了解并确认这是个不安全的网站，你仍要访问就给你访问了。

第三步
代码里使用接口时都需要指明使用https的接口，比如 https://note-server.hunger-valley.com/***。

问题二

在项目打包完成，发布到Github上后，文件本地引用图片无法加载 image.png

image.png

原因

因为我们的 js 打包，在 html 里的路径是 /assets 开头的，而 githubpages 是有二级路径的，以/assets开头实际上是加载了https://poyapli.github.io/assets/xxx的资源，路径是错的，所以需要手动修改 webpack 打包的配置，然后重新 build 即可

总结

为避免部署后静态资源路径不对导致的 404和图片路径不对导致的 404问题，应该执行以下操作。

部署后静态资源路径不对的问题（比如 githubpages）

//  项目根路径/config/index.js
build:{
    assetsPublicPath: '/',   //   改成 './'
}

图片路径不对的问题（比如某个界面的背景图）

  • 只需要进行以下操作即可
// 项目根路径/build/utils.js
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath:'../../',  // 添加这一行代码即可
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

只要执行了以上两个操作，一般问题就解决了。

avatar
文章
阅读
粉丝