根据以下命令对项目进行打包: 

npm run build

 命令执行完出现

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

看了一下,build complete,嗯完成了,后面的也没有看,直接打开了生成的dist文件夹下的index.html

dist目录index.html

打开后出现一个空白页面,并且控制台是上面这样的。 

在网上查了很多,基本都是在config/index.js中改路径。那么问题来了vue cli 3.0没有build和config 啊,那去哪里改?

最后发现直接在根目录下vue.config.js(如果没有这个文件的话,可以直接在更目录中添加一个,配置参考)文件中进行修改。

将baseUrl属性的值'/'改为'./'。

module.exports = {
  // 基本路径
  baseUrl: './',
  // 输出文件目录
  outputDir: 'dist',
  // webpack-dev-server 相关配置
  devServer: {
    port: 8888,
  },
}

改好之后就可以直接在本地打开index.html了。

额。。。打开是打开了 ,可是问题又来了,我的登录页面需要请求cookie,但是在这里get返回的是个空。。。。好像是因为filex协议的问题。并且在部署里(也就是在执行完npm run build 之后提示的连接中)也说明了dist 目录需要启动一个 HTTP 服务器来访问,所以以 file:// 协议直接打开 dist/index.html 是不会工作的。

不知道为什么我运行下面命令不起作用:

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist

就在网上查看了一下,我用了其中一种方法(参考):

执行下面命令:

npm install http-server -g 全局

 然后在dist文件下执行:

http-server

http-server

直接打开上面的网址访问就可以了。

Logo

前往低代码交流专区

更多推荐