vue 使用webpack打包后路径报错以及 alias 的使用

一、vue 使用webpack打包后路径报错（两步解决）

1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './'

2. build文件夹 ==> utils.js ==> 添加代码 publicPath: '../../'

二、alias的使用（两种方式）

当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用alias 了，在脚手架搭的vue项目中,在webpack.base.conf.js里面可以找到默认配置：

使用方法1： alias 指向src目录下，再使用相对路径找文件（默认配置）：

resolve: {

  alias: {

    '@': resolve(__dirname, 'src')

  }

}

//使用

import stickTop from '@/components/stickTop'

使用方法2：每个文件夹单独配置

alias: {

  'src': path.resolve(__dirname, '../src'),

  'components': path.resolve(__dirname, '../src/components'),

  'api': path.resolve(__dirname, '../src/api'),

  'utils': path.resolve(__dirname, '../src/utils'),

  'store': path.resolve(__dirname, '../src/store'),

  'router': path.resolve(__dirname, '../src/router')

}

//使用

import stickTop from 'components/stickTop'

import getArticle from 'api/article'

巴特西

vue 使用webpack打包后路径报错以及 alias 的使用

一、vue 使用webpack打包后路径报错（两步解决）

1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './'

2. build文件夹 ==> utils.js ==> 添加代码 publicPath: '../../'

二、alias的使用（两种方式）

使用方法1： alias 指向src目录下，再使用相对路径找文件（默认配置）：

使用方法2：每个文件夹单独配置

最新文章

热门文章

巴特西

vue 使用webpack打包后路径报错以及 alias 的使用

一、vue 使用webpack打包后路径报错（两步解决）

1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './'

2. build文件夹 ==> utils.js ==> 添加代码 publicPath: '../../'

二、alias的使用（两种方式）

使用方法1： alias 指向src目录下，再使用相对路径找文件（默认配置）：

使用方法2： 每个文件夹单独配置

最新文章

热门文章

使用方法2：每个文件夹单独配置