vuecli3 public 静态文件404

在使用Vue CLI3创建项目时，通常会在根目录下建立一个public文件夹，该文件夹下存放静态资源文件，如图片、字体、favicon等等。但是在实际使用过程中，会发现用浏览器打开web页面时会报出404错误，提示找不到静态资源文件。

这种现象的出现是因为Vue CLI3默认使用了webpack进行打包构建，webpack对于public文件夹中的静态资源文件会将其编译到dist文件夹中。而在开发过程中，需要访问public文件夹下的静态资源文件，而不是dist文件夹中的。

为了访问public文件夹下的静态文件，要想办法将public文件夹下的内容复制到dist文件夹中，并保持目录结构一致。

最简单的解决方法是在项目根目录下创建一个vue.config.js文件，设置publicPath属性为'./'，并添加copy-webpack-plugin插件来复制public中的文件到dist目录。代码如下：

const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  publicPath: './',
  configureWebpack: {
    plugins: [
        new CopyWebpackPlugin([{
            from: 'public',
            to: ''
        }])
    ]
  }
}

这样就可以在浏览器中访问public文件夹下的静态资源文件了。

相关问题

vuecli3配置详解

Vue CLI 3是一个基于Vue.js的脚手架工具，它提供了一种快速创建和配置Vue项目的方式。相比于Vue CLI 2，Vue CLI 3具有以下几个主要的区别和优点：

1. "0配置"设计原则：Vue CLI 3移除了配置文件根目录下的一些配置文件，如build和config文件夹，使项目的配置更加简洁和直观。

2. 可视化配置：Vue CLI 3提供了vue ui命令，通过浏览器界面提供了可视化的项目配置方式，使得配置更加人性化。

3. 静态资源文件夹的变化：Vue CLI 3移除了static文件夹，而新增了public文件夹，并将index.html文件移动到public文件夹中。

请注意，Vue CLI 3的配置文件也发生了变化。在Vue CLI 3中，配置文件被拆分成了多个部分，分布在各个插件和模块中，以满足不同的需求。例如，babel的配置文件被放置在babel.config.js中，eslint的配置文件被放置在.eslintrc.js中。

vue-cli 工程下文件目录作用

vue-cli 项目的文件目录的作用如下：

1. `public` 目录：存放静态资源，如 index.html，图片等，它们将直接复制到最终的打包文件中。

2. `src` 目录：存放源代码，包括 Vue 组件、JavaScript、CSS 等。

3. `components` 目录：存放组件文件。

4. `views` 目录：存放页面组件。

5. `router` 目录：存放路由配置文件。

6. `store` 目录：存放 Vuex 状态管理文件。

7. `assets` 目录：存放项目需要的资源文件，如图片、字体等。

8. `App.vue` 文件：根组件。

9. `main.js` 文件：程序入口文件，初始化 Vue 实例。

10. `.env` 文件：环境变量配置文件。

11. `babel.config.js` 文件：Babel 配置文件。

12. `package.json` 文件：项目依赖配置文件。

13. `README.md` 文件：项目说明文件。

这些文件目录的作用是为了方便项目的维护和开发，使得代码更好的组织和管理。