vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

下面是详细讲解“vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决”的完整攻略。

1. 修改打包后的文件名和地址

1.1 修改文件名

使用 vue-cli 3.0 打包生成的文件名是自动化的，会根据默认的模板来命名，比如 js/chunk-vendors.f8bb20ba.js，如果想要修改这些文件的名字，可以通过配置 output 来实现。

首先需要在 vue.config.js 中添加如下配置：

module.exports = {
  configureWebpack: {
    output: {
      filename: 'my-project.js',
      chunkFilename: 'my-project.[name].js'
    }
  }
}

这个配置会将打包后的文件名修改为 my-project.js 和 my-project.[name].js。其中的 [name] 会被替换成每个 chunk 的名称。

1.2 修改文件地址

默认情况下，打包后的文件会放在 dist 目录下，如果想要修改文件的地址，需要配置 assetsDir。

如果将 assetsDir 设为 .，则打包后的文件会放在当前目录下。

module.exports = {
  configureWebpack: {
    output: {
      filename: 'my-project.js',
      chunkFilename: 'my-project.[name].js'
    }
  },
  assetsDir: '.'
}

这个配置会将打包后的文件放在当前目录下。

2. 打包后本地运行报错解决

打包后的文件不能通过打开 index.html 来运行，需要通过启动一个本地服务器来运行，可以使用 http-server 这个包来实现。

2.1 安装 http-server

npm install -g http-server

2.2 启动本地服务器

在打包后的文件夹中执行以下命令：

http-server

这个命令会启动一个本地服务器，默认端口为 8080，可以通过浏览器访问 http://localhost:8080 来访问打包后的文件。

这样就可以在本地运行打包后的文件了。

以上就是本题的“vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决”的完整攻略。

阅读剩余 30%