D:\project\ts_demo ├─.browserslistrc ├─.eslintrc.js ├─.gitignore ├─babel.config.js ├─package-lock.json ├─package.json ├─README.md ├─tsconfig.json ├─tests |├─unit ||├─.eslintrc.js ||└example.spec.ts ├─src |├─App.vue |├─main.ts |├─registerServiceWorker.ts |├─shims-tsx.d.ts |├─shims-vue.d.ts |├─views ||├─About.vue ||└Home.vue |├─store ||└index.ts |├─router ||└index.ts |├─components ||└HelloWorld.vue |├─assets ||└logo.png ├─public |├─favicon.ico |├─index.html |├─robots.txt |├─img ||├─icons |||├─favicon-16x16.png |||├─... ├─.git |├─...

//package.json { "name": "ts_demo", "version": "0.1.0", "private": true, "scripts": { "dev": "vue-cli-service serve", "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit" }, ... }

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。访问方式：process.env.NODE_ENV
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。访问方式：process.env.BASE_URL，因此配置项目发布路径时，可以直接在环境变量配置。默认是/。
• 以 VUE_APP_开头的变量，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，可以在客户端侧的代码中访问。访问方式：process.env.VUE_APP_<自定义变量名>

//.env.development BASE_URL = "/development/"

//.env.production BASE_URL = "/production/"

{ "name": "typescript_demo1", "version": "0.1.0", "private": true, "scripts": { "dev": "vue-cli-service serve --mode dev", "serve": "vue-cli-service serve --mode dev", "build": "vue-cli-service build --mode prod", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit" }, ... }

//.env.dev NODE_ENV = "dev" VUE_APP_URL = "/development/"

//.env.prod NODE_ENV = "prod" VUE_APP_URL = "/production/"

import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import "./registerServiceWorker"; Vue.config.productionTip = false; console.log(process.env.NODE_ENV); console.log(process.env.VUE_APP_URL); new Vue({ router, store, render: h => h(App) }).$mount("#app");

module.exports = { // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。 publicPath: '/', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录 outputDir: 'dist', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录，默认为"" assetsDir:"", //指定生成的 index.html 的输出路径 (相对于 outputDir) indexPath:"", // eslint-loader 是否在保存的时候检查 lintOnSave: true, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md //如果这个值是一个对象，则会通过 [webpack-merge](https://github.com/survivejs/webpack-merge) 合并到最终的配置中。 //如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。 configureWebpack: () => {}, //是一个函数，会接收一个基于 [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) 的 `ChainableConfig` 实例。允许对内部的 webpack 配置进行更细粒度的修改。 chainWebpack: () => {}, // 生产环境是否生成 sourceMap 文件 productionSourceMap: true, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。 parallel: require('os').cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, /* webpack-dev-server 相关配置 */ devServer: { /* 自动打开浏览器 */ open: true, /* 设置为0.0.0.0则所有的地址均能访问 */ host: '0.0.0.0', port: 8066, https: false, hotOnly: false, /* 使用代理 */ proxy: { '/api': { /* 目标代理服务器地址 */ target: 'http://47.100.47.3/', /* 允许跨域 */ changeOrigin: true, }, }, }, // 第三方插件配置 pluginOptions: { // ... } }

//vue.config.js module.exports = { publicPath: "/", assetsDir: "static", }

D:\project\ts_demo\dist ├─favicon.ico ├─index.html ├─manifest.json ├─robots.txt ├─js | ├─about.js | ├─app.js | └chunk-vendors.js ├─img |├─logo.82b9c7a5.png |├─...

D:\project\ts_demo\dist ├─favicon.ico ├─index.html ├─manifest.json ├─robots.txt ├─static |├─js || ├─about.js || ├─app.js || └chunk-vendors.js |├─img ||└logo.82b9c7a5.png

const path = require("path"); const resolve = dir => path.join(__dirname, dir); module.exports = { publicPath: "/", assetsDir: "static", chainWebpack: config => { // 添加别名 config.resolve.alias .set("@", resolve("src")) .set("@assets", resolve("src/assets")) .set("@components", resolve("src/components")) .set("@router", resolve("src/router")) .set("@views", resolve("src/views")); } };

vue inspect > webpack.config.js

npm i webpack-bundle-analyzer -D

NODE_ENV = 'prod' IS_ANALYZ = 'analyz'

{ "name": "ts_demo", "version": "0.1.0", "private": true, "scripts": { "dev": "vue-cli-service serve --mode dev", "serve": "vue-cli-service serve --mode dev", "build": "vue-cli-service build --mode prod", "analyz": "vue-cli-service build --mode analyz", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit" }, ... }

const path = require("path"); const resolve = dir => path.join(__dirname, dir); const BundleAnalyzerPlugin = require("webpack-bundle-analyzer") .BundleAnalyzerPlugin; module.exports = { publicPath: "/", assetsDir: "static", chainWebpack: config => { // 添加别名 config.resolve.alias .set("@", resolve("src")) .set("@assets", resolve("src/assets")) .set("@components", resolve("src/components")) .set("@router", resolve("src/router")) .set("@views", resolve("src/views")); } chainWebpack: config => { // 打包分析 if (process.env.IS_ANALYZ) { config.plugin("webpack-report").use(BundleAnalyzerPlugin, [ { //可以是`server`，`static`或`disabled`。 //在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。 //在“静态”模式下，会生成带有报告的单个HTML文件。 //在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。 analyzerMode: "static" } ]); } } };

FileSizeGzippeddist\static\js\chunk-vendors.js567.50 KiB128.21 KiB dist\static\js\app.js80.62 KiB7.91 KiB dist\static\js\about.js6.84 KiB1.19 KiB

npm i compression-webpack-plugin -D

D:\project\ts_demo\dist ├─favicon.ico ├─index.html ├─manifest.json ├─robots.txt ├─static |├─js || ├─about.js || ├─app.js || └chunk-vendors.js |├─img ||└logo.82b9c7a5.png ├─img |├─icons

D:\project\ts_demo\dist ├─favicon.ico ├─index.html ├─manifest.json ├─robots.txt ├─static |├─js || ├─about.js || ├─app.js || ├─app.js.gz || ├─chunk-vendors.js || └chunk-vendors.js.gz |├─img ||└logo.82b9c7a5.png ├─img |├─icons

DllPlugin：这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的

DllReferencePlugin：这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。

1. 新增一个webpack配置dll.config.js，用dllPlugin定义要打包的dll文件
2. 运行dll.config.js生成vendor.dll.js及相应的manifest文件vendor-manifest.json，并在项目模板index.html中引入vendor.dll.js
3. 在项目的webpack配置中，通过dllReferencePlugin及vendor-manifest.json告诉webpack哪些包已经提前构建好了，不再需要重复构建

//dll.config.js const path = require("path"); const webpack = require("webpack"); // dll文件存放的目录 const dllPath = "public/vendor"; module.exports = { entry: { // 需要提取的库文件 vendor: ["vue", "vue-router", "vuex"] }, output: { path: path.join(__dirname, dllPath), filename: "[name].dll.js", // vendor.dll.js中暴露出的全局变量名 // 保持与 webpack.DllPlugin 中名称一致 library: "[name]_[hash]" }, plugins: [ // manifest.json 描述动态链接库包含了哪些内容 new webpack.DllPlugin({ path: path.join(__dirname, dllPath, "[name]-manifest.json"), // 保持与 output.library 中名称一致 name: "[name]_[hash]", context: process.cwd() }) ] };

{ "name": "ts_demo", "version": "0.1.0", "private": true, "scripts": { "dev": "vue-cli-service serve --mode dev", "serve": "vue-cli-service serve --mode dev", "build": "vue-cli-service build --mode prod", "analyz": "vue-cli-service build --mode analyz", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit", "inspect": "vue-cli-service inspect > webpack.config.js", "dll": "webpack -p --progress --config ./dll.config.js" }, ... }

clean-webpack-plugin：用于删除构建目录和文件

npm i clean-webpack-plugin -D

//dll.config.js const path = require("path"); const webpack = require("webpack"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // dll文件存放的目录 const dllPath = "public/vendor"; module.exports = { entry: { // 需要提取的库文件 vendor: ["vue", "vue-router", "vuex"] }, output: { path: path.join(__dirname, dllPath), filename: "[name].dll.js", // vendor.dll.js中暴露出的全局变量名 // 保持与 webpack.DllPlugin 中名称一致 library: "[name]_[hash]" }, plugins: [ // 清除之前的dll文件 new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ["*.*"] }), // manifest.json 描述动态链接库包含了哪些内容 new webpack.DllPlugin({ path: path.join(__dirname, dllPath, "[name]-manifest.json"), // 保持与 output.library 中名称一致 name: "[name]_[hash]", context: process.cwd() }) ] };

add-asset-html-webpack-plugin：把JavaScript 或者 CSS 资源添加到发布目录下的html

npm i add-asset-html-webpack-plugin -D

//vue.config.js const path = require("path"); const resolve = dir => path.join(__dirname, dir); const webpack = require("webpack"); const CompressionWebpackPlugin = require("compression-webpack-plugin"); const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin"); const BundleAnalyzerPlugin = require("webpack-bundle-analyzer") .BundleAnalyzerPlugin; module.exports = { publicPath: "/", assetsDir: "static", configureWebpack: config => { //生产模式启用gzip压缩 if (process.env.NODE_ENV === "prod") { const plugins = []; plugins.push( new CompressionWebpackPlugin({ filename: "[path].gz[query]", //目标资源文件名称 algorithm: "gzip", //压缩算法 test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, //匹配所有对应的文件 threshold: 10240, //只处理比这个值大的资源。按字节计算 minRatio: 0.8, //只有压缩率比这个值小的资源才会被处理（minRatio = 压缩大小 / 原始大小） deleteOriginalAssets: false //是否删除原始资源 }), new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require("./public/vendor/vendor-manifest.json") }), // 将 dll 注入到 生成的 html 模板中 new AddAssetHtmlPlugin({ // dll文件位置 filepath: path.resolve(__dirname, "./public/vendor/*.js"), // dll 引用路径 publicPath: `${process.env.BASE_URL}static/js/vendor`, // dll最终输出的目录 outputPath: "static/js/vendor" }) ); // 合并plugins config.plugins = [...config.plugins, ...plugins]; } }, chainWebpack: config => { // 添加别名 config.resolve.alias .set("@", resolve("src")) .set("@assets", resolve("src/assets")) .set("@components", resolve("src/components")) .set("@router", resolve("src/router")) .set("@views", resolve("src/views")); // 打包分析 if (process.env.IS_ANALYZ) { config.plugin("webpack-report").use(BundleAnalyzerPlugin, [ { //可以是`server`，`static`或`disabled`。 //在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。 //在“静态”模式下，会生成带有报告的单个HTML文件。 //在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。 analyzerMode: "static" } ]); } } };

PS D:\project\ts_demo> npm run build> ts_demo@0.1.0 build D:\project\ts_demo > vue-cli-service build --mode prod\Building for prod...Starting type checking service... Using 1 worker with 2048MB memory limit \Building for prod... DONECompiled successfully in 4587ms16:58:46 FileSizeGzippeddist\static\js\chunk-vendors.js231.52 KiB40.36 KiB dist\static\js\vendor\vendor.dll.js104.53 KiB35.37 KiB dist\vendor\vendor.dll.js104.53 KiB35.37 KiB dist\static\js\app.js84.10 KiB8.27 KiB dist\static\js\about.js6.84 KiB1.19 KiBImages and other types of assets omitted. DONEBuild complete. The dist directory is ready to be deployed. INFOCheck out deployment instructions at https://cli.vuejs.org/guide/deployment.html

npm i axios -S npm i qs -S

//axios.tool.ts /** * axios公共处理 * 1、取消重复的请求 * 2、集中处理接口失败的普通情况 * 3、设置默认的表头 * 4、设置默认的请求前缀 * 5、设置请求超时限制 * 6、设置token过期或者重新登录时，请求接口的处理，此时刷新页面到登录 * 7、绑定公共的请求方法到vue原型：get和post */ import Vue from "vue"; import axios from "axios"; import qs from "qs"; // 取消请求 const CancelToken = axios.CancelToken; // 设置默认请求头 axios.defaults.headers = { "X-Requested-With": "XMLHttpRequest", "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8", "Cache-Control": "no-cache", "If-Modified-Since": "0" }; // Axios中post请求将data数据以request payload转换为form data的形式 axios.defaults.transformRequest = [ function(data: any) { return qs.stringify(data); } ]; let _window: any = window; //设置默认的请求前缀 axios.defaults.baseURL = process.env.NODE_ENV === "production" && _window.location.pathname.indexOf("qualityBoard3") > -1 ? process.env.VUE_APP_URL1 : process.env.VUE_APP_URL; // 请求超时的时间限制 axios.defaults.timeout = 20000; // 开始设置请求 发起的拦截处理 // config 代表发起请求的参数的实体 const pending: any = {}; const removePending = (key: any, isRequest = false) => { if (pending[key] && isRequest) { pending[key]("取消重复请求"); } delete pending[key]; }; /** * config: 请求数据 * isReuest: 请求拦截器中 config.url = '/users', 响应拦截器中 config.url = 'http://localhost:3000/users'，所以加上一个标识来计算请求的全路径 */ const getRequestIdentify = (config: any, isReuest = false) => { let url = config.url; if (isReuest) { url = config.baseURL + config.url.substring(1, config.url.length); } return config.method === "get" ? encodeURIComponent(url + JSON.stringify(config.params)) : encodeURIComponent(config.url + JSON.stringify(config.data)); }; axios.interceptors.request.use( (config: any) => { // 拦截重复请求(即当前正在进行的相同请求) let requestData = https://www.it610.com/article/getRequestIdentify(config, true); removePending(requestData, true); config.cancelToken = new CancelToken(c => { pending[requestData] = c; }); return config; }, (error: any) => { return Promise.reject(error); } ); var account = _window.user ? _window.user.account : ""; // 请求到结果的拦截处理 axios.interceptors.response.use( (response: any) => { // 把已经完成的请求从 pending 中移除 let requestData = https://www.it610.com/article/getRequestIdentify(response.config); removePending(requestData); // 对响应数据做点什么 if (process.env.NODE_ENV !=="development") { // sessionStatus 浏览器不一样，大小写不一样 if ( (response.headers.SESSIONSTATUS && response.headers.SESSIONSTATUS === "TIMEOUT") || (response.headers.Sessionstatus && response.headers.Sessionstatus === "TIMEOUT") || (response.headers.sessionstatus && response.headers.sessionstatus === "TIMEOUT") ) { // 如果接口返回timeout,表示当前账号实际退出了，不管当前用户显示不显示，都刷新为未登录状态 window.location.href = "https://xxx/login"; } else if ( (response.headers.USER && response.headers.USER !== account) || (response.headers.User && response.headers.User !== account) || (response.headers.user && response.headers.user !== account) ) { // 如果当前接口返回显示当前已经登录，而页面显示未登录或者显示登录的账号与实际登录的账号不一致，则刷新为正确账号 // 当切换了账号，重新刷新页面登录 window.location.reload(); } }if ( response.data.code !== undefined && parseInt(response.data.code) !== 0 ) { //接口错误处理 } return response.data; }, (error: any) => { return Promise.reject(error); // 错误的请求结果处理，这里的代码根据后台的状态码来决定错误的输出信息 } ); // 将axios 的 post 方法，绑定到 vue 实例上面的 $post Vue.prototype.$post = (url: any, params: any) => { return new Promise((resolve, reject) => { axios .post(url, params) .then((res: any) => { resolve(res); }) .catch((err: any) => { reject(err); }); }); }; // 将axios 的 get 方法，绑定到 vue 实例上面的 $get Vue.prototype.$get = (url: any, params: any) => { return new Promise((resolve, reject) => { axios .get(url, { params: params }) .then((res: any) => { resolve(res); // 返回请求成功的数据 data }) .catch((err: any) => { reject(err); }); }); };

declare module "*.vue" { import Vue from "vue"; export default Vue; } //增加qs声明 declare module "qs" { const qs: any; export default qs; }

import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import "@/registerServiceWorker"; Vue.config.productionTip = false; console.log(process.env.NODE_ENV); console.log(process.env.VUE_APP_URL); import "./axios.tool"; // 导入封装好的axios new Vue({ router, store, render: h => h(App) }).$mount("#app");

• Auto Fix On Save
• Enable
• Lint Task: Enable

{ "window.zoomLevel": 0, "terminal.integrated.rendererType": "dom", "editor.formatOnSave": true, "eslint.lintTask.enable": true, "vetur.validation.template": false, "typescript.updateImportsOnFileMove.enabled": "always", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "javascript.updateImportsOnFileMove.enabled": "always", }

//.prettierrc.js module.exports = { singleQuote: false//禁止单引号 };

let a = '1';

let a = "1";

/** *{全局扫描注册组件} */ import Vue from "vue"; // 自动加载 common 目录下的 .js 结尾的文件 const componentsContext = require.context("@/components/common", true, /\.ts$/); console.log(componentsContext); componentsContext.keys().forEach((component) => { const componentConfig = componentsContext(component); /** * 兼容 import export 和 require module.export 两种规范 */ const ctrl = componentConfig.default || componentConfig; Vue.component(ctrl.options.name, ctrl); });

import "@/registerGlobalComponents";

//Hello.vue

//index.ts import Hello from "./Hello.vue"; export default Hello;

#app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; }

npm i ComponentsName -S

import "ComponentsName/dist/styles/vsuite.css"; import ComponentsName from "ComponentsName"; Vue.use(ComponentsName);

npm i babel-plugin-import -D

{ "plugins": [ [ "import", { "libraryName": "ComponentsName", "libraryDirectory": "src/components" } ] ] }

import Vue from "vue"; import { Icon } from "ComponentsName"; Vue.component("Icon", Icon);

推荐阅读

• 

  色母片是什么
• 

  mysql怎么查找递归 sql实现mysql递归查询
• 

  java数组基础详解
• 

  宝宝|婴幼儿意外伤害第一时间如何正确处置？
• 

  mysql服务层中解析器包含哪些功能 mysql解析器是什么
• 

  别出心裁的“烧南北”
• 

  真机|小米又站起来了！MIX 4真机屏幕曝光：这效果太好
• 

  水果拼盘常用水果 三种水果拼盘图片
• 

  品质分析方法,统计学分析方法有哪些
• 

  2023年北京郁金香文化节有几个展区参加 2023年北京郁金香文化节有几个展区
• 

  拍摄延时摄影用什么格式，延时摄影的图片格式
• 

  htcG13手机应该下个什么文件阅读器或者浏览器？一打开爱奇艺就自动把视频 图片查看器 音乐播放器全改成了爱奇艺万能播放器，
• 

  轻轨是地铁吗
• 

  mysql解压tar
• 

  百度导航下载导航，百度地图导航下载
• 

  go语言控制台输出 go语言控制台输入
• 

  预算在1500,如何配置一台玩DNF的电脑？
• 

  破晓色是什么颜色？
• 

  工程竣工验收需要哪些资料？ 工程竣工验收需要哪些资料
• 

  比亚迪s7报价多少 比亚迪s7报价多少?

• vue-cli|vue-cli 3.x vue.config.js 配置
• 2020-04-07vue中Axios的封装和API接口的管理
• 17|17 关山松 第二课作业#公众号项目# D20
• RxJava|RxJava 在Android项目中的使用（一）
• Hacking|Hacking with iOS: SwiftUI Edition - SnowSeeker 项目（一）
• VueX--VUE核心插件
• 靠QQ月入上万灰色暴利偏门的项目
• spring|spring boot项目启动websocket
• vue组件中为何data必须是一个函数（）
• 用npm发布一个包的教程并编写一个vue的插件发布