博客

解决Vue-cli npm run build生产环境打包,本地不能打开的问题

  • Post category:http

下面是关于解决Vue-cli npm run build生产环境打包，本地不能打开的问题的详细攻略。

问题描述

当在vue-cli项目中运行npm run build命令时，可以成功地将项目打包到生产环境，然而，在本地运行生成的文件时，可能会遇到“无法找到文件”或“损坏”的问题。

解决方案

1. 确认publicPath路径

在打包前，需要先确认publicPath路径的正确性。在config/index.js文件中，需要设置build对象下的assetsPublicPath值为根路径/。

build: {
  assetsPublicPath: '/'
}

2. 设置路由模式

如果使用了vue-router，需要确认路由模式，即mode属性的值。有两种模式：hash和history。在打包后，使用hash模式打开生成的文件时，只需要在url地址中加上#号即可。而使用history模式打开生成的文件时，可能会遇到404错误。

如果使用了history模式，需要修改config/index.js文件中build对象下的historyApiFallback为true。

build: {
  historyApiFallback: true
}

示例1

在vue-cli项目中使用history模式，我们需要将router.js中的mode属性设置为history。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

修改完毕后，在运行npm run build打包命令后，可以在本地双击打开生成的index.html文件，访问本地生产环境下的网站。

示例2

如果在vue-cli项目中使用了iframe嵌套，可能会遇到子页面无法访问父页面资源的问题。此时，需要在父页面中设置base标签。

在父页面的index.html中，设置<head>标签下的<base>标签，指向生产环境中的根目录。

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/">
    <meta charset="utf-8">
    <title>父页面</title>
  </head>
  <body>
    <div>
      <!-- 嵌入子页面 -->
      <iframe src="http://localhost:8080/child.html"></iframe>
    </div>
  </body>
</html>

设置完毕后，子页面可以正常访问父页面的资源。

总结

通过确认publicPath路径和修改路由模式，可以解决vue-cli打包后本地无法访问的问题。

如果使用了iframe嵌套，需要设置base标签才能让子页面正常访问父页面资源。

Tags: