Vue-cli3和Vue-cli4打包 npm run build 路径错误解决办法(亲测管用)

Vue-cli3打包 npm run build 路径错误解决办法

我们用vue-cli搭建的项目执行npm build后本地打开页面空白，如何才能查看npm run build之后的结果呢。

我们先看一下提示信息：

 Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

这段话的意思就是说：构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作，那如何本地查看呢：

（1）到项目目录下的config文件夹里的index.js文件中,其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./’,即“/”前加点。

现在再重新打包一次 npm run build，刷新你的页面，就可以看到啦。

（2）还有一种就是借助http-server：

首先我们需要安装它命令npm install http-server -g，然后执行npm run build,之后进入打包的目录我这里是cd dist然后执行http-server就可以啦。

Vue-cli4打包 npm run build 路径错误解决办法

在项目根目录下，和package.json同级的目录下，创建一个vue.config.js文件（不能是其他的名字）
publicPath:’./ ’ 是解决相对路径的方法

module.exports = {
  publicPath: './',
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
        'plugins': '@/plugins',
      }
    }
  }
}

—文章首发—