Vue项目中index.html中的相对路径，打包后未变成绝对路径如何修改

Question

问题描述

在Vue项目中，index.html 我使用了script标签引入了一个在static目录下的文件

这是项目目录，我的js在static/js/xxxx.js

<script src="./static/js/xxx.js" ></script>

在dev情况下是可以使用的，但是在打包到dist后，dist目中的index.html,
还是

<script src="./static/js/xxx.js" ></script>

这样的话，我已经该怎么修复呢

Answer 1

在webpack.base.conf.js中

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'static':path.resolve(__dirname,'../static')  //添加这行
    }
  },

使用时 'static/js/lalal.js' 前面不用 ./

utils.js中

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'   //添加这行
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

index.js中

assetsPublicPath: './', //前面加个点

这样打包后路径就不会有错了

Answer 2

如果你用history模式，是不用修改配置文件的配置打包路径的，你只需要让后台配置，并且你还要做一个路由跳转错误处理。如果你是使用hash模式，那么你就采用1楼所说的办法。

Answer 3

index.js中的build命令的配置有一个属性叫assetsPublicPath，值改为‘./’；

utils.js中修改如楼上

Answer 4

放在static目录下中新建的文件夹不要叫js、css、fonts、img，因为在打包时在dist/static目录下会生成这些文件夹，所以，为了避免麻烦，换个名字。