Vue提高18 更换打包文件路径

已同步到个人博客，欢迎访问。

一个由更改Vue打包后路径引发的一系列问题。

引入字体文件

在Vue中，想要引入字体文件，需要，使用@font-face来引入本地的字体

h1 {
  background: url('./assets/images/logo.png');
}

然后再App.vue中引入并使用

<style>
  @font-face {
    font-family: 'hello';
    src: url('./assets/font/d.ttf');
    font-weight: bold;
    font-style: italic;
  }
  .hello-inner h1 {
    font-family: hello;
   }
</style>

这样就可以使用引入的字体了。

也可以单独建立一个CSS文件来统一管理引入的字体，然后通过import引入

<style>
  @import 'font.css';
  .hello-inner h1 {
    font-family: hello;
   }
</style>

url-loader

Webpack中的loader的目的是用来处理各种非JS之外的文件，可以使你在import或"加载"模块时预处理文件。

执行的顺序是从右至左，在Vue-cli2中，在webpack.base.conf.js中定义了一些基本的loader：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('media/[name].[hash:7].[ext]')
      }
    },
    {
      test: /\.(w