Assets 文件夹与 dist 文件夹：何时何地放置什么？

Question

我不明白如何在 Vue-cli/Webpack 中正确使用路径。我浏览了文档，但对我来说仍然没有意义。

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

然后，在我的组件中，我正在使用这样的 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 文件等文件，

• 我将在我的项目的根目录中创建一个顶级目录并将其命名为 assets 在该特定目录中，我将拥有 css、js、img、字体等，如上图所示。 在每个目录中，我可能有 scss、dev 之类的东西来表示我的未压缩的、基于开发的文件。

因此，将此作为我们工作的指导方针会有所帮助。如前所述，CSS、JavaScript、图像、字体等都可以被视为资产。因此，拥有一个包含上述所有内容的顶级资产目录是否没有意义？

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

也检查这个答案 - What is the role of src and dist folders?