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异步按一定的时间间隔刷新问题
Dec 10 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
微信小程序实现时间进度条功能
Nov 17 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
Terran魔法科技
2020/03/14 星际争霸
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
js获取form表单中name属性的值
2019/02/27 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
利用Python实现Windows定时关机功能
2017/03/21 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python 实现按对象传值
2019/12/26 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
PHP面试题附答案
2015/11/28 面试题
货物运输服务质量承诺书
2014/05/29 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
信访工作汇报材料
2014/10/27 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
Python PIL按比例裁剪图片
2022/05/11 Python