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 相关文章推荐
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
如何在微信小程序中存setStorage
Dec 13 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
深入理解PHP内核(一)
2015/11/10 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
python能开发游戏吗
2020/06/11 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
学习新党章思想汇报
2014/01/09 职场文书
领导干部培训感言
2014/01/23 职场文书
运动会入场词60字
2014/02/15 职场文书
结婚周年感言
2014/02/24 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
唐山大地震观后感
2015/06/05 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
python执行js代码的方法
2021/05/13 Python
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技