项目中遇到打包之后静态资源路径找不到,报如下错误:
解决方法是:
在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下:
module.exports = { publicPath: './' }
补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置
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打包上线静态资源找不到路径的解决操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue cli3.0打包上线静态资源找不到路径的解决操作”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
2024年12月28日
2024年12月28日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]