打包部署线上之后报config.js和css文件找不到

这个问题可能是因为你在本地开发的时候，config.js和css文件是通过相对路径进行引用的，但是在部署到线上之后，文件的路径会发生变化，导致无法找到这些文件。为了解决这个问题，你可以尝试以下几种方法：

1. 使用绝对路径引用文件，这样无论部署到哪个路径下，都能够正确地找到文件。可以使用类似于`/static/css/index.css`的方式引用文件。

2. 在webpack的配置文件中，使用`publicPath`选项指定打包后文件的路径。这样打包后生成的文件中，引用路径会自动加上这个前缀，从而正确地找到文件。

3. 将config.js和css文件打包成一个独立的文件，然后在html中通过script和link标签引入。这样即使路径变化，也能够找到这个文件。

希望这些方法能够帮助你解决问题。

相关问题

node vuecli3部署项目

### 如何使用 Vue CLI 3 部署 Node.js 项目

#### 安装必要的环境和工具

确保已安装最新版本的 Node.js 和 npm 或 yarn。这可以通过命令 `node -v` 来验证是否成功安装[^1]。

#### 创建新项目

通过 Vue CLI 创建一个新的 Vue 项目：

vue create my-project-name

此命令将引导完成一系列选项的选择，包括预设功能和其他配置项。对于希望与 Node.js 后端集成的情况，建议选择手动配置并启用 Router 功能以便于前后端分离开发模式下的路由管理。

#### 修改构建设置

为了更好地适应全栈应用的需求，在项目的根目录下创建或编辑 `vue.config.js` 文件来进行自定义 Webpack 构建配置。例如调整静态资源路径、代理 API 请求至本地服务器等操作均可以在此处实现[^3]。

#### 设置反向代理支持跨域请求

如果前端需要调用同一台机器上运行的不同端口的服务，则可以在 `vue.config.js` 中添加 devServer.proxy 属性来解决开发期间可能出现的 CORS (Cross-Origin Resource Sharing) 跨源资源共享问题:

module.exports = {
    devServer: {
        proxy: 'http://localhost:3000' // 假定后端服务监听的是 3000 端口
    }
}

#### 打包生产环境代码

当准备部署应用程序时，可执行如下命令生成优化后的静态文件供线上发布使用：

npm run build

该指令将会把编译好的 dist 目录放置在项目根部，其中包含了所有经过压缩混淆处理过的 HTML/CSS/JS 文件以及公共资源素材，可以直接上传到任何 HTTP(S) 服务器上去提供访问。

#### 整合 Express 实现简单API接口

考虑到某些场景可能不需要完整的 Koa / Egg.js 这样的大型框架作为后台支撑，此时可以选择轻量级解决方案——Express 搭配 jsonwebtoken 提供基本的身份认证机制即可满足大部分需求；另外也可以考虑采用 GraphQL 替代 RESTful 设计风格以减少客户端和服务端之间的交互次数从而提高性能表现[^2]。