vue2 打包后 dist文件路径出错

可能是你的配置文件中没有正确设置打包后的文件路径，或者在使用时没有正确引用路径。

如果你使用的是 vue-cli，可以检查一下 `vue.config.js` 文件中的配置是否正确设置了 `outputDir`，例如：

module.exports = {
  outputDir: 'dist',
  // ...
}

如果你手动配置 webpack，则需要检查 `output` 配置是否正确设置了 `path`，例如：

output: {
  path: path.resolve(__dirname, 'dist'),
  // ...
}

另外，如果你在引用打包后的文件时使用了相对路径，也有可能出现路径错误的情况。建议使用绝对路径或者 webpack 提供的别名来引用文件。

例如，在 vue-cli 中，可以在 `vue.config.js` 中使用 `chainWebpack` 配置别名：

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@', path.resolve(__dirname, 'src'))
  },
  // ...
}

然后在代码中就可以使用 `@/` 来引用 src 目录下的文件了。

相关问题

vue2打包后的文件dist如何部署到linux上

将Vue 2的打包文件部署到Linux服务器上，你可以按照以下步骤进行操作：

1. 通过FTP或其他文件传输工具将`dist`文件夹中的内容上传到Linux服务器上的目标文件夹。确保你拥有足够的权限来访问和操作该目标文件夹。

2. 在Linux服务器上安装一个Web服务器，例如Nginx或Apache。这些服务器软件可以帮助你将静态文件（如HTML、CSS和JavaScript）提供给客户端。

3. 配置你的Web服务器以提供Vue应用程序。以下是两个常见的配置示例：

- Nginx配置示例：

   server {
       listen 80;
       server_name yourdomain.com;
       root /path/to/your/dist/folder;
   
       location / {
           try_files $uri $uri/ /index.html;
       }
   }

- Apache配置示例：

   <VirtualHost *:80>
       ServerName yourdomain.com
       DocumentRoot /path/to/your/dist/folder
   
       <Directory /path/to/your/dist/folder>
           Options Indexes FollowSymLinks MultiViews
           AllowOverride All
           Require all granted
       </Directory>
   </VirtualHost>

请确保将`/path/to/your/dist/folder`替换为你实际的`dist`文件夹的路径。

4. 重新启动你的Web服务器，以使配置生效。

现在，你的Vue应用程序应该可以通过在浏览器中访问服务器的IP地址或域名来访问了。例如，如果你的服务器IP地址是`192.168.1.100`，则可以在浏览器中输入`http://192.168.1.100`来查看你的Vue应用程序。

Vue CLI打包如何设置文件路径

在 Vue CLI 中，可以通过配置 `vue.config.js` 文件来设置打包后文件的路径。具体步骤如下：

1. 在项目根目录下新建 `vue.config.js` 文件。

2. 在 `vue.config.js` 中添加如下代码：

   module.exports = {
     publicPath: '/your-path/'
   }

其中 `publicPath` 为设置打包后文件的路径。

3. 执行 `npm run build` 命令重新打包项目。

在打包完成后，文件将会生成在以 `publicPath` 为路径的文件夹下。例如，如果将 `publicPath` 设置为 `/myapp/`，则打包后的文件将会生成在 `myapp` 文件夹下。在部署时，只需要将该文件夹中的所有文件上传到 Web 服务器即可。

除了 `publicPath` 外，还可以通过配置 `outputDir` 来设置打包后的文件夹名称，例如：

module.exports = {
  outputDir: 'myapp',
  publicPath: '/myapp/'
}

这样，在执行 `npm run build` 命令时，Vue CLI 会将打包后的文件生成在以 `outputDir` 为名称的文件夹下。