基于Vue和Quasar的前端SPA项目实战之docker部署（八） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据（七）的介绍，crudapi-admin-web基本功能全部实现了...配置quasar.conf.js build: { vueRouterMode: 'history', publicPath: '/crudapi/', distDir: `dist/${ctx.modeName...}/crudapi` } 通常将前端打包之后的文件放在一个子目录下，方便和其它系统集成，比如可以放在spring boot项目的resources/static/crudapi目录下，避免放在根目录，所以这里配置...index.html index.htm; try_files $uri $uri/ /crudapi/index.html; } } default.conf中主要配置两个...内部自动处理路由 .dockerignore配置 .DS_Store .git .gitignore node_modules dist .quasar .vscode .dockerignore package-lock.json
' Error: Cannot find module 'serve-index' 如果你用的是老版本的 vue-cli 还可能报其他错误，需要更新一下 vue-cli npm update vue-cli...报错是由于我们引入了index.css这个 CSS 文件，但是 webpack 打包的时候无法识别并转换成 js，所以就需要配置才能读取 css 和字体文件，运行命令安装下面三个东西(如果之前安装过就不需要了...webpack 命令也是可以打包的 webpack --color --progress 接着把 index.html 和整个 dist 目录丢到服务器就可以了。...' Error: Cannot find module 'serve-index' 如果你用的是老版本的 vue-cli 还可能报其他错误，需要更新一下 vue-cli npm update vue-cli...webpack 命令也是可以打包的 webpack --color --progress 接着把 index.html 和整个 dist 目录丢到服务器就可以了。
： - "react-dev-inspector": "^1.7.0", 并且要删除配置文件中的相应的插件。 ...actual: false, expected: true, operator: '==' } 这个的意思是说，有一些无效配置，在 umi@4 中已经被剔除或者是默认开启，不需再配置了，我直接把.../config/config.dev.ts 文件删掉了，然后把 /config/config.ts 中的这些配置项删掉。... { - localsConvention: 'camelCase', - }, 还可能会报 @umijs/plugin-access 的错误： error - ....plugin-access/runtime.tsx 文件，可以看到引入了 @@/plugin-model ： 我费了半天劲，在 github umi 仓库找到一个 issue ：umi4，qiankun没有导出
build以及config中的js .eslintrc.js: 代码规范化配置文件 .gitignore: 忽略上传一些文件或配置 .postcsssrc.js: 用js来处理css index.html...打包到哪 output: { //读取utils index.js中的build的assetRoot,就是 'dist'文件夹 path: config.build.assetsRoot...use: loaders, // 处理loader fallback: ‘vue-style-loader’ // 没有被提取分离时使用的loader }) } else...[chunkhash].js'), //导出的文件名 chunkFilename: utils.assetsPath('js/[id]....分离出的js重复问题(多个文件引用同一个css文件) // generate dist index.html with correct asset hash for caching. /
首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口 webpack 就会去项目的根目录中，查找一个叫做 webpack.config.js 的配置文件 找到配置文件后，webpack...就会解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象 当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建 如果 webpack.../ //这是配置 Babel 来转换 ES 的语法 } ] } } 注意： 在配置 babel 的 loader 规则的时候，必须把 node_modules...可以向外暴露成员 export 也是可以向外暴露成员 它导出的成员只能还是用 {} 的形式来接收，这种形式，叫做 【按需导出】 它可以向外暴露多个成员，同时这些成员，在使用 import 的时候，不需要...，则可以不再 {} 中定义 它导出的成员，必须严格按照导出时候的名称，来使用 {} 按需接收，但可以使用 as 来起别名 17 如何在 webpack 使用 vue-router 17.1 安装 npm
[], // 需要包含的类型声明⽂件名列表 "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导⼊。...typescript 编译器看到的每个变量、方法都必须明确知道它的类型，在 src/index.ts 文件中导入 src/sum/index.js 文件，js 文件中的方法是没有类型的，造成 typescript...$ node dist/index.js $ 4 虽然 ts 文件中可以导入 js 文件，并正常运行程序，但但但但但但是，js 文件的方法类型全是 any 很恶心。...= multiply 修改 test-declare/src/index.ts 文件，导入 multiply 模块，可以看到报错：没有找到 multiply 模块的声明文件。...导出一个方法 上面写的所有声明方法都是对外暴露一个方法，暴露变量类似。
1.Webpack中使用Vue 运行将vue安装为运行依赖； 导入vue 包的查找规则： 找 项目根目录中有没有 node_modules 的文件夹 在 node_modules 中 根据包名...) { return createElements(login) } 简写`render: c => c(login)' 3.ES6中语法使用总结 使用 和 导出模块中的成员; 使用 还有...，可以同时使用 export default 和 export 向外暴露成员 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】 export...可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {}...} B.在项目打包之前，可以将dist目录删除，生成全新的dist目录 Post Views: 376
引入其他模块或者包 2).使用exports或者module.exports导出模块成员 3).一个文件就是一个模块，都拥有独立的作用域 C.ES6模块化 ES6模块化规范中定义.../index.js 3.设置默认导入/导出 A.默认导出 export default { 成员A, 成员B, ....... },如下： let num = 100; export...如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象 4.设置按需导入/导出 A.按需导出 export let num = 998; export let myName = "jack.../test.js" //同时导入默认导出的成员以及按需导入的成员 import test,{ num,fn as printFn ,myName } from "....8.设置webpack的打包入口/出口 在webpack 4.x中，默认会将src/index.js 作为默认的打包入口js文件 默认会将dist/main.js 作为默认的打包输出
一、ES6的模块化 1. ES6模块化规范 每个 js 文件都是一个独立的模块 导入模块成员使用 import 关键字 暴露模块成员使用 export 关键字 2....基本语法 发使用 export default { }导出默认成员 使用 import 接收名称 from "模块路径" 导入 使用 export A 按需导出 使用 import { A, B...2. webpack的基本使用 ? 等待 webpack 打包完毕之后，找到默认的 dist 路径中生成的 main.js 文件，将其引入到 html 页面中。...3. webpack的相关配置 配置 webpack 打包的入口/出口 默认会将 src/index.js 作为默认的打包入口 js 文件，将 dist/main.js 作为默认的打包输出 js 文件...什么是 vue 单文件组件 Vue单文件组件每个单文件组件的后缀名都是.vue 优化了传统全局组件的一些弊端（模板缺乏高亮、没有 css 等） 每一个Vue单文件组件都由template、script
两者的区别：一丑!一俊！ history俊归俊，但history外表的洒脱并没有小伙伴们所想象的那么潇洒！ 因为我们一旦将项目打完包并让其正式开工干活时，你会发现浏览器刷新时居然会找不到地址，没错！...这哪里还有俊的痕迹？ ? 原因：URL 匹配不到任何静态资源。 解决方法：通过重写URL的方式对服务器进行配置，将匹配不到的URL，全部指向app所依赖的页面：index.html。...:"index.html",->index属性默认值为指向index.html htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']...---- 二、proxy代理跨域请求只有在生产环境中有效 proxy在vue-cli3.0以上，可以通过修改vue.config.js来配置，例如： module.exports = { devServer...具体步骤： 1、下载依赖包：http-proxy-middleware // 用于把请求代理转发到其他服务器的中间件。
这是【npm publish package】的最后一篇文章，总结了开发时需要注意的要点还有目前我自己遇到的错误集合。 没有长篇大论，全是解决问题的关键点，便于快速找到问题点以及解决方案。...{ "main": "src/index.ts", "module": "src/index.ts" } 确认需要发布： 这里就注意需要修改成 build 后的文件作为入口，切记！切记！.../node_modules/eslint-loader/index.js): Error: No ESLint configuration found in PROJECT\cat-web-storage...\dist. 06 - 不存在属性警告错误 如果使用的是 TypeScript 来开发就需要注意一下，testModules 启动正常，但是控制台提示警告错误，但页面运行正常。...未找到 ESLint 配置错误，在这里也是花费了一些时间，主要是第一次遇到的时候报出了 ESLint 的错误，先入为主看着错误的字面意思我就是以为没有引入 ESLint 包，后来又引入了 ESLint
/node_modules/@babel/generator/lib/index.js 源码分析 经过一番测试大致锁定了报错范围。...本地构建正常，服务端构建机报错，项目并没有锁定 这个项目并没有使用 package-lock.json 锁定包版本。 难道是因为 node_modules 的某个依赖包偷偷更新了？...原因是：似乎上面的代码并没有什么问题，但是确实又在构建引入 SetArray 模块的时候报错了。 那么会不会是构建的问题呢？构建不支持这个 .mjs 后缀的文件?...}] } } 将上面的配置配置之后，果然不再报错了。...至此，问题解决，核心关键就在于配置mjs文件的构建 rule 类型为 javascript/auto 。
比如，bootstrap-vue没有datepicker，uiv没有table，其他就不一一列举。因为组件的完整度问题，这两个就暂不采用。 ...├── config // 构建配置 ├── dist // 项目构建发布目录 ├── lib-dist // 项目外部依赖库，第5章会用到 ├── index.html...对于这一点的配置，可以选择在`config/index.js`上进行配置增改，也可以在`build/dev-server.js`上直接修改源码。 ...那么有没有一个方法可以既能保证静态与动态请求分别走不同的代理规则，又能不用每次来一个新的路径就加一条规则呢？答案是肯定的。.../dist/vue-resource.js', 'element-ui/lib/index.js' ], }, output: { path: pathLib.join
/* CommonJS 1.模块分文单文件模块与包 2.模块成员导出: module.exports和exports 3.模块成员导入: require('模块标识符').../index.js 默认导出 默认导出语法为export default 默认导出的成员 export default { 成员A, 成员B,.../test.js" // 同时导入默认导出的成员以及按需导入的成员 import test,{ num,fn as printFn ,myName } from "....默认会将src/index.js 作为默认的打包入口js文件 默认会将dist/main.js 作为默认的打包输出js文件 */ 如果不想使用默认的入口/出口js文件，我们可以通过改变...传统Vue组件的缺陷 全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中) 没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel
/index.js 2.ES6模块化基本语法 设置默认导入和导出 默认导出语法： export default { 成员A, 成员B, ... } 使用方法 let num =...，否则会报错 小tip： 如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象 在导出的函数中能够读取到没有被导出的值 //index.js文件 let num = 10; let...并没有被导出 //m1.js文件 import index from '....Q 在执行完命令后，我们会发现项目目录下多了个dist文件夹，这个文件夹存放的是通过webpack打包后的文件，也就是我们这个项目中转为为浏览器兼容的代码，因此我们将这个文件引入我们的index.html...，会提示构建后代码错误信息 推荐使用：source-map（√） 使用oneOf优化打包构建速度 在我们之前写的rules中，每一个文件都会被所有的规则判断一遍，这样的操作是没有必要的 因此我们使用
/check-versions')() // 获取 config/index.js 的默认配置 var config = require('...../node_modules')], alias: { // 默认路径带了 例如 import vue for ‘vue’或自动到’vue/dist/vue.common.js’.../dist/index.html'), // 编译出的静态资源根路径 assetsRoot: path.resolve(__dirname, '...../dist'), // 编译输出的二级目录 assetsSubDirectory: 'static', // 编译发布上线路径的根目录，可配置为资源服务器域名CDN 域名.../node_modules') ) === 0 ) } }), // 没有指定输出文件名称的文件输出的静态文静名 new webpack.optimize.CommonsChunkPlugin
4 Node.js中模块化开发规范 Node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到 模块内部可以使用exports对象进行成员导出，...5 模块成员导出 var add = (n1, n2) => n1 + n2; exports.add = add; 6 模块成员的导入 var a = require('./03-mobule-a'...导入模块时后缀可以省略 7 模块成员导出的另一种方式 module.exports.version = version; module.exports.sayHi = sayHi; exports是module.exports...如果模块后缀省略，先找同名JS文件再找同名JS文件夹 如果找到了同名文件夹，找文件夹中的index.js 如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找...会假设它是系统模块 Node.js会去node_modules文件夹中 首先看是否有该名字的JS文件 再看是否有该名字的文件夹 如果是文件夹看里面是否有index.js 如果没有
本文讲的是如何将一个旧的 Node.js 项目使用 TypeScript 进行改造，包括目录结构调整、TypeScript-ESLint 配置、tsconfig 配置、调试、常见错误处理等。.../node_modules/@types" ], "allowSyntheticDefaultImports": false, /* 允许从没有设置默认导出的模块中默认导入，仅用于提示...，并不会添加工具类，但会将单个属性导出修改为整个模块导出，并将原来的函数调用表达式修改为成员函数调用表达式。...这个是针对没有默认导出的模块的一种兼容，fs 模块是 commonjs，并没有__esModule属性，使用modules.exports导出。...所幸，tsconfig 提供了一个配置allowSyntheticDefaultImports，意思是允许从没有设置默认导出的模块中默认导入，需要注意的是，这个属性并不会对代码的生成有任何影响，仅仅是给出提示
前期准备工作 一、编辑器配置高亮 敲代码没有高亮简直蛋疼，简单带过下 sublime打开 —→ 点击Preferences下的Package Control —→ 输入install package回车...",//打包后导出文件夹 filename: "bundle.js"//导出的文件名 }, module: { loaders: [...手动在dist里建一个index.html，引用最后打包的bundle.js，才能显示出来 \\index.html <!...报错解决 在做这个项目过程中，一些小问题会导致报错，我把我所遇到的错误罗列如下，希望能解决你的问题。 报错一 ?...可以发现，只检查了常用的 HTML 元素，还有很多元素没有检查，例如 button、main。所以nav.vue的名称不能使nav，改成navbar。 报错三 ?
这个文件应该导出一个包含了选项的对象： // vue.config.js module.exports = { // 选项... } baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath...// 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html...:4000' } } 这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。...如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。...和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
