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

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

我们先看一下提示信息:

1
2
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:’./ ‘ 是解决相对路径的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
publicPath: './',
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'views': '@/views',
'plugins': '@/plugins',
}
}
}
}