vue cli3.0打包上线静态资源找不到路径的解决操作


Posted in Javascript onAugust 03, 2020

项目中遇到打包之后静态资源路径找不到,报如下错误:

vue cli3.0打包上线静态资源找不到路径的解决操作

解决方法是:

在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下:

module.exports = {
  publicPath: './'
}

补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置

vue cli3.0打包上线静态资源找不到路径的解决操作

vue.config.js配置如下:

const path = require('path');
const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 (另:https://github.com/liriliri/eruda)
const CompressionPlugin = require('compression-webpack-plugin'); //Gzip
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器
const baseUrl = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss资源路径 不同环境切换控制
 
module.exports = {
 //基本路径
 baseUrl: './',
 //输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
 assetsDir: 'static',
 //以多页模式构建应用程序。
 pages: undefined,
 //是否使用包含运行时编译器的 Vue 构建版本
 runtimeCompiler: false,
 //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建,在适当的时候开启几个子进程去并发的执行压缩
 parallel: require('os').cpus().length > 1,
 //生产环境是否生成 sourceMap 文件,一般情况不建议打开
 productionSourceMap: false,
 // webpack配置
 //对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: config => {
  /**
   * 删除懒加载模块的prefetch,降低带宽压力
   * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
   * 而且预渲染时生成的prefetch标签是modern版本的,低版本浏览器是不需要的
   */
  //  config.plugins.delete('prefetch');
  //  if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
  //  } else {// 为开发环境修改配置...
  //  }
 },
 //调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
 configureWebpack: config => {
  //生产and测试环境
  let pluginsPro = [
   new CompressionPlugin({ //文件开启Gzip,也可以通过服务端(如:nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$', ),
    threshold: 8192,
    minRatio: 0.8,
   }),
   // Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
   new BundleAnalyzerPlugin(),
  ];
  //开发环境
  let pluginsDev = [
   //移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin https://github.com/Tencent/vConsole)
   new vConsolePlugin({
    filter: [], // 需要过滤的入口文件
    enable: false // 发布代码前记得改回 false
   }),
  ];
  if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
   config.plugins = [...config.plugins, ...pluginsPro];
  } else {
   // 为开发环境修改配置...
   config.plugins = [...config.plugins, ...pluginsDev];
  }
 },
 css: {
  // 启用 CSS modules
  modules: false,
  // 是否使用css分离插件
  extract: true,
  // 开启 CSS source maps,一般不建议开启
  sourceMap: false,
  // css预设器配置项
  loaderOptions: {
   sass: {
    //设置css中引用文件的路径,引入通用使用的scss文件(如包含的@mixin)
    data: `
    $baseUrl: "/";
   `
   }
  }
 },
 // webpack-dev-server 相关配置 https://webpack.js.org/configuration/dev-server/
 devServer: {
  host: 'localhost',
  // host: "0.0.0.0",
  port: 8000, // 端口号
  https: false, // https:{type:Boolean}
  open: true, //配置自动启动浏览器 http://XXX.XXX.X.XX:7071/rest/XXX/
  hotOnly: true, // 热更新
  proxy: 'http://localhost:8000' // 配置跨域处理,只有一个代理
  // proxy: { //配置自动启动浏览器
  // "/XX/*": {
  //  target: "http://XXX.XXX.X.XX",
  //  changeOrigin: true,
  //  // ws: true,//websocket支持
  //  secure: false
  // },
  // "/x/*": {
  //  target: "http://XXX.XXX.X.XX",
  //  changeOrigin: true,
  //  // ws: true,//websocket支持
  //  secure: false
  // },
  // }
 },
 
 // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
 pluginOptions: {
  'style-resources-loader': {//https://github.com/yenshih/style-resources-loader
   preProcessor: 'scss',//声明类型
   'patterns': [
//    path.resolve(__dirname, './src/assets/scss/_common.scss'),
   ],
//   injector: 'append'
  }
 }
};

以上这篇vue cli3.0打包上线静态资源找不到路径的解决操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(五)正则表达式
Apr 08 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JS解析XML实例分析
Jan 30 Javascript
js数组依据下标删除元素
Apr 14 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
canvas绘制的直线动画
Jan 23 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
js数组中去除重复值的几种方法
Aug 03 #Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 #Javascript
javascript运行机制之执行顺序理解
Aug 03 #Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 #Javascript
vue实现PC端分辨率适配操作
Aug 03 #Javascript
浅谈JavaScript中的“!!”作用
Aug 03 #Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 #Javascript
You might like
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
会计专业毕业自荐书范文
2014/02/08 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
集体备课反思
2014/02/12 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
勇敢的心观后感
2015/06/09 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python