vue-cli3打包之后的文件为何不能本地打开

Posted 2023-03-09

参考技术A

<meta charset="utf-8">

vue-cli 提供了一个入口让你能配置修改 webpack .

在根目录下新建一个 vue.config.js 文件, 然后在其中修改 publicPath 这个选项:

vue.config.js :

将这个选项设置为 \'/\' (当前文件夹).

现在你就可以本地打开 dist 文件夹中的 index.html 了.

但是会有一个小问题, 就是如果你使用了 vue-router (路由)的话, 会发现路由跳转有问题了.

这个路径明显不对呀...

原来是因为我的 vue-router 的模式设置成了 history 模式:

src/router/index.js :

只要把 mode 改为 hash 就可以正常跳转了(其实默认是这个模式的, 但如果你的项目中mode被改了你得知道是这个问题).

vue-cli搭建的项目打包之后报“资源路径错误&资源文件找不到“

//在项目的根目录下（和package.json文件同级）新建一个文件vue.config.js的文件，将此段代码复制进去。
module.exports = 
    baseUrl: ‘/‘, //在 baseUrl前面加个点baseUrl: ‘./‘
    outputDir: ‘dist‘,
    lintOnSave: true,
    runtimeCompiler: true, 
    chainWebpack: () => ,
    configureWebpack: () => ,
    devServer: 
      open: process.platform === ‘darwin‘,
      host: ‘localhost‘,
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null,
      before: app => 
    
  

注：如果打包之后还不能解决问题，找到你项目里面router.js文件，将mode：‘ history ’注释掉，如果还需要使用此模式，需要和后端进行配合使用，详情请查看官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html