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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
非常漂亮的JS代码经典广告
Oct 21 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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 feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python全栈开发语法总结
2020/11/22 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
少先队学雷锋活动总结范文
2014/03/09 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
初中家长评语大全
2014/12/26 职场文书
工会经费申请报告
2015/05/15 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
Java spring定时任务详解
2021/10/05 Java/Android
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
Python日志模块logging用法
2022/06/05 Python
python playwright之元素定位示例详解
2022/07/23 Python