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 弹出层插件实现代码
Oct 24 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
js获取php变量的实现代码
Aug 10 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
Vue.js原理分析之nextTick实现详解
Sep 07 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获取字段名示例分享
2014/03/03 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
php实现简易计算器
2020/08/28 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
javascript表单正则应用
2017/02/04 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
PyQt5实现简易计算器
2020/05/30 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python实现AI换脸功能
2020/04/10 Python
解决python运行启动报错问题
2020/06/01 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
python爬取天气数据的实例详解
2020/11/20 Python
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
毕业自荐信
2013/12/16 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
公司授权委托书范本
2014/09/18 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
高三复习计划
2015/01/19 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
领导离职感言
2015/08/03 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android