vue cli3.0 打包后的问题处理

打包我们的项目:

npm run build

完毕后显示
vue cli3.0 打包后的问题处理_第1张图片
到这里就是打包完成了,在dist文件夹中直接打开index.html,尴尬!!啥也没有,控制台还报错了
vue cli3.0 打包后的问题处理_第2张图片

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

将publicPath属性的值’/‘改为’./’。

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
  // outputDir: 'dist',
  // pages:{ type:Object,Default:undfind }
  assetsDir: "./",
  devServer: {
    port: 8888, // 端口号
    host: "localhost",
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    // proxy: {
    //   "/api": {
    //     target: "",
    //     ws: true,
    //     changeOrigin: true
    //   },
    //   "/foo": {
    //     target: ""
    //   }
    // } // 配置多个代理
  }
};

改好之后我们又可以打开index.html了。

呵呵哒 ,问题又来了,为什么只能看到title,内容还是白的,console没有报错了

接下来一顿操作:

执行下面命令:

npm install http-server -g

然后在dist文件下执行:

http-server

出现下面:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.0.125:8080

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

转载:https://www.jianshu.com/p/7120d7b2485d

你可能感兴趣的:(vue)