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

打包我们的项目：

npm run build

完毕后显示

image.png

到这里就是打包完成了，在dist文件夹中直接打开index.html，尴尬！！啥也没有，控制台还报错了

image.png

在网上找了会，然后直接在根目录下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: "<url>",
    //     ws: true,
    //     changeOrigin: true
    //   },
    //   "/foo": {
    //     target: "<other_url>"
    //   }
    // } // 配置多个代理
  }
};

改好之后我们又可以打开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

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

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

推荐阅读更多精彩内容