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'