Vue-cli3和Vue-cli4打包 npm run build 路径错误解决办法(亲测管用)
Vue-cli3打包 npm run build 路径错误解决办法
我们用vue-cli搭建的项目执行npm build后本地打开页面空白,如何才能查看npm run build之后的结果呢。
我们先看一下提示信息:
1 | Tip: built files are meant to be served over an HTTP server. |
这段话的意思就是说:构建文件务必放在一个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 | module.exports = { |
Invitation
aqing
962555446
created:15/04/2021
Welcome to Candyhome
Use this card to join the candyhome and participate in a pleasant discussion together .
Welcome to aqing's candyhome,wish you a nice day .
评论