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

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?