WebStorm打包Vue项目

WebStorm打包Vue项目

修改资源路径

build下的utils.js文件：

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        //添加代码内容start-------------
        publicPath:"../../",
        //添加代码内容end---------------
        fallback: 'vue-style-loader'
      })

config下的index.js文件:

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    //修改代码内容start-------------
    assetsSubDirectory: './static',
    assetsPublicPath: './',
    //修改代码内容end---------------

在package.json文件同级目录下新建一个vue.config.js

// vue.config.js
module.exports = {
  publicPath: './',
}

检查router下的index.js文件下配置的mode模式:

检查如果模式改为了history模式，打包后的页面为空，将其注释，使用默认的hash模式即可

在README.md文件下点击npm run build 打包，或者在命令行输入

目录中多一个dist文件夹即为打包成功

测试一下，浏览器打开index.html即可

成功！！！