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

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

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

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

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

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

二、alias的使用(两种方式)

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

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

使用方法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'
上一篇:webpack打包字体图标报错的解决办法


下一篇:webpack打包jquery并引用