vue cli打包路径报错

在使用Vue CLI进行项目开发的过程中，打包路径报错是一个常见的问题，这通常发生在将Vue项目打包部署到服务器上时，由于资源配置路径不正确导致的一系列问题，在此，我将详细解释为何会出现这样的问题，并提供相应的解决方案。

我们需要了解Vue CLI项目在开发和生产环境中的差异，在开发环境下，Vue CLI使用的是webpackdevserver，它默认使用内存中的文件系统，并可以通过配置的代理来解决跨域问题，而在生产环境下，项目通过npm run build进行打包，生成的静态资源通常会部署到静态资源服务器或者类似Tomcat这样的Java Web服务器上。

路径报错主要体现在以下几种情况：

1、静态资源路径错误：打包后，HTML文件中的CSS、JS等静态资源的路径不正确，导致浏览器无法加载这些资源。

原因：在Vue CLI项目的配置文件中，assetsPublicPath（或与之等价的配置）通常被设置为’/’，这表示所有的资源都会基于域名的根目录加载，当你的应用被部署到服务器的子目录下时，这种绝对路径就会导致资源加载失败。

解决方法：你需要将assetsPublicPath的值修改为相对路径’./’，在Vue CLI 3.x版本以后，项目配置文件config/index.js已经不再默认生成，需要手动在项目根目录创建vue.config.js文件，并添加如下配置：

“`javascript

module.exports = {

publicPath: ‘./’, // 或 process.env.NODE_ENV === ‘production’ ? ‘./’ : ‘/’,

// 其他配置…

};

“`

这样配置后，所有资源的路径都会变成相对路径，使得无论应用部署在哪个目录下，浏览器都能正确找到这些资源。

2、路由路径问题：除了静态资源路径外，Vue项目的路由也可能会出现路径问题。

原因：Vue Router在默认情况下也会使用绝对路径，如果在路由配置中使用了history模式，那么部署到非根目录时也会出现路径问题。

解决方法：在router/index.js中，可以设置base属性为相对路径：

“`javascript

const router = new VueRouter({

mode: ‘history’,

base: process.env.BASE_URL, // 使用环境变量定义的基础路径

routes // （缩写）相当于 routes: routes

});

“`

在环境变量配置文件.env.production中设置BASE_URL：

“`

BASE_URL=./

“`

3、模块导入导出混用问题：有时在打包过程中可能会遇到类似cannot assign to read only property 'exports' of object的错误。

原因：这是因为在项目中混用了CommonJS的module.exports和ES6的export语法。

解决方法：避免在同一模块中混用这两种语法，或者通过配置Babel来严格区分这两种模块系统，创建babel.config.js文件，并加入以下配置：

“`javascript

module.exports = {

presets: [

‘@vue/app’

],

sourceType: ‘unambiguous’

};

“`

sourceType: 'unambiguous'的配置会让Babel严格区分CommonJS和ES6模块。

Vue CLI项目打包路径报错的问题通常与资源加载路径、路由配置、模块导入导出语法混用有关，通过上述的配置和修改，可以解决大多数的路径报错问题，确保项目能够顺利打包并正确部署，在处理这些问题时，理解配置背后的工作原理是关键，这有助于我们在遇到其他类似问题时能够快速定位并解决。