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文件夹下的静态资源文件了。

相关问题

vue组件怎么用public下静态文件

在Vue.js应用中，`public`目录通常用于存放静态资源，如CSS、JavaScript、图片等，它们会被直接暴露在服务器上，无需经过Web服务器处理。如果你需要在Vue组件中引用这些静态文件，你可以按照以下步骤操作：

1. **放置文件**：将静态文件放在`src/public`目录下（在Vue CLI项目中默认如此）。例如，对于一个名为`styles.css`的样式表文件，应该放在`src/public/styles.css`。

2. **使用相对路径**：在Vue组件的模板中，通过`<link>`标签引用样式，或者使用`require`函数引入其他脚本文件，这时使用的是相对路径，如：
- 引入外部CSS：`<link rel="stylesheet" href="./styles.css">`
- 引入JavaScript：`<script src="./scripts.js"></script>`

3. **构建配置**：确保在`vue.config.js`或其他构建配置文件中，已经设置了正确的配置来让Webpack处理`public`目录下的内容。Vue CLI默认配置会自动处理这个部分，你不需要做额外设置。

4. **使用`import`动态导入**：如果你想在运行时动态加载这些文件，可以使用`import()`函数：

   import('./styles.css').then(style => {
     // 在这里注册样式到文档中
   });

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中。