Question

我不了解如何在Vue-cli / Webpack中正确使用路径。我已经阅读了文档，但对我来说仍然没有意义。

我的默认data.json目录中有src/assets个文件。

然后，在我的组件中，我正在使用这样的GET请求（使用第三方AXIOS插件）：

组件： MainBody.vue

created() {
    axios.get('../assets/data.json')
      .then( response => {
        // JSON responses are automatically parsed.
        this.serviceLinks = response.data
      })
      .catch( error => {
        console.log(error)
      })
  }//end created

这是我的项目结构：

当我运行npm run dev并进行测试时，我在编译期间收到以下错误：

    VM224:1 GET http://localhost:8080/dist/data.json 404 (Not Found)
(anonymous) @ VM224:1
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:59
Promise.then (async)
request @ Axios.js?5e65:51
Axios.(anonymous function) @ Axios.js?5e65:61
wrap @ bind.js?24ff:9
created @ MainBody.vue?87c5:34
callHook @ vue.esm.js?efeb:2895
Vue._init @ vue.esm.js?efeb:4560
VueComponent @ vue.esm.js?efeb:4728
createComponentInstanceForVnode @ vue.esm.js?efeb:4242
init @ vue.esm.js?efeb:4059
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
createChildren @ vue.esm.js?efeb:5586
createElm @ vue.esm.js?efeb:5488
patch @ vue.esm.js?efeb:5995
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
init @ vue.esm.js?efeb:4065
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
patch @ vue.esm.js?efeb:6034
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
Vue._init @ vue.esm.js?efeb:4570
Vue$3 @ vue.esm.js?efeb:4659
(anonymous) @ main.js?1c90:35
./src/main.js @ app.js:1528
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:1537
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
MainBody.vue?87c5:40 Error: Request failed with status code 404
    at createError (createError.js?16d0:16)
    at settle (settle.js?db52:18)
    at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)
VM224:1 XHR failed loading: GET "http://localhost:8080/dist/data.json".
(anonymous) @ VM224:1
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:59
Promise.then (async)
request @ Axios.js?5e65:51
Axios.(anonymous function) @ Axios.js?5e65:61
wrap @ bind.js?24ff:9
created @ MainBody.vue?87c5:34
callHook @ vue.esm.js?efeb:2895
Vue._init @ vue.esm.js?efeb:4560
VueComponent @ vue.esm.js?efeb:4728
createComponentInstanceForVnode @ vue.esm.js?efeb:4242
init @ vue.esm.js?efeb:4059
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
createChildren @ vue.esm.js?efeb:5586
createElm @ vue.esm.js?efeb:5488
patch @ vue.esm.js?efeb:5995
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
init @ vue.esm.js?efeb:4065
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
patch @ vue.esm.js?efeb:6034
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
Vue._init @ vue.esm.js?efeb:4570
Vue$3 @ vue.esm.js?efeb:4659
(anonymous) @ main.js?1c90:35
./src/main.js @ app.js:1528
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:1537
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
VM224:1 XHR finished loading: GET "http://localhost:8080/sockjs-node/info?t=1521117155016".

我是否必须将data.json文件放入/ dist文件夹？我不想以这种方式维护文件。我认为如果在/ assets文件夹中维护所有内容会更容易吗？也许我没有正确理解这个工作流程。谢谢。

Answer 1

资产应包含SPA /项目所需的资源。文件，如图像，.json文件，

我将在项目的根目录中创建一个顶级目录并将其称为资产在该特定目录中，我将拥有css，js，img，fonts等，如上图所示。在每个目录中，我可能有类似scss，dev等的东西来表示我的未经开发的基于开发的文件。

因此，将此作为我们工作的指南可以提供帮助。如前所述，CSS，JavaScript，图像，字体等都可以被视为资产。因此，拥有一个顶级资产目录没有意义，上面所有的都将存在？

dist/代表分发，是缩小/连接版本 - 实际用于生产网站。

同样检查此答案 - What is the role of src and dist folders?

资产文件夹vs dist文件夹：何时何地放置什么？

1 个答案: