项目打包出现路径错误解决方案

• 打包步骤

  • 脚手架工程运行 npm run build 或yarn build
    • 作用: 用vue-cli内部集成的webpack,把.vue,.less.js 等打包成浏览器可可直接执行的代码.
    • 结果:会在项目根目录下创建/dist目录,在这个目录下产出打包后的结果
  • 打包之后运行
    • 直接使用vscode+liveserver插件运行打包后的静态网页index.html
      • 打开之后显示空白页,打开控制台,发现全是路径引入错误
      • 
      • 因为要的都是服务器根目录下的js/css文件夹,但是根目录下没有js/css
    • 出错原因
      • vscode+liveserver插件,会把vscode打开的根目录当做服务器的根目录,根目录下并没有js/css文件夹
  • 解决错误
    • ​​​​​​​只需要让webpack打包时,把路径改为相对路径即可
    • 在vue.config.js,第一次对象里添加配置  publicPath: './'
    •