vue-cli v2.9升级到vue-cli 4.3 版本,静态资源(路径)如何处理?

项目之前用vue-cli 2.9版本创建的,但是现在运气起来特别慢,想升级一下vue-cli,今天果断升级到了@vue/cli 4.3.1 版本,我把项目文件直接拷贝到新项目里面,把访问静态资源路径由/static/ 改为了/public/,但是踩坑里面去了,访问静态资源返回结果老是返回一些html页面源码,访问路径:http://localhost:8081/public/wangEditor/wangEditor.js

经过多次尝试,发现把路径里面的/public/去掉即可正常访问,但是现在的问题是,很多访问静态资源的地方都带上了public,如果想通过 webpack 统一配置,改怎么修改呢?

注:我希望可以不去掉public才是正确的访问方式。因为我的静态资源只是从 static 换到了 public 文件夹下。

回答:

@vue/cli 4.5.6使用UEditor配置,按照 这个教程 一步步走下来,我在本地成功运行。

但有一个注意点:在@vue/cli 4.5.6版本中,

data () {
  return {
    msg: '请输入内容',
    myConfig: {
      autoHeightEnabled: false, //编辑器不自动被内容撑高
      initialFrameHeight: 240, //初始容器高度
      initialFrameWidth: '50%', //初始容器宽度
      serverUrl: 'http://xxx/controller.php', //上传文件接口
      UEDITOR_HOME_URL: '/UEditor/' //【此处为重点,不需要修改为/public/UEditor/】
    }
  }
}

网上太多的教程没有标明详细的Vue-cli版本号,导致在UEDITOR_HOME_URL配置有点问题。
在此Mark一下。

回答:

在 vue.config.js中设置 publicPath

默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath/my-app/

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注