알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

Apache2 Vue3(Vite) 배포 해당 과정은 Apache2 에 Vue3 프로젝트를 여러개 배포 한다는 과정에 작성 되어 있습니다. 응용하면 1개 배포는 쉽습니다. Vue3 프로젝트 vite.config.ts export default defineConfig({ plugins: [ vue() ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, base: "/waferMap/", }) 저의 경우 base 를 "/waferMap" 으로 하여 접속 Url - http://배포주소:포트/waferMap 으로 설정 하도록 했습니다. Public 폴더안 img 참조 변경 저의 Vue Project 폴더 구조 안 Pu..

해당 방법은 1번 보다 vue 공식 문서에 좀 더 가까운 방법 입니다. 저의 publicPath 은 아래와 같습니다. 톰캣과 맞췄습니다. 아래는 현재 router 셋팅 입니다., import Vue from 'vue' import VueRouter, { RouteConfig } from 'vue-router' import Home from '../views/Home.vue' import TestHistoryPage from "@/views/TestHistoryPage.vue" Vue.use(VueRouter) const routes: Array = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // rout..

vue histroy 모드를 tomcat 에서 그냥 사용 하면 url로 어떤 경로를 바로 접속시 404 에러를 만납니다. const router = new VueRouter({ mode: 'history', routes }) vue.config.js module.exports = { publicPath: "/authComponent/", } 아래와 같이 라우팅이 잡혀 있을때. const routes: Array = [ { path: '/authComponent', name: 'Home', component: Home }, { path: '/authComponent/about', name: 'About', // route level code-splitting // this generates a separa..

vue js 에서 Rotuer 부분을 import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; import About from "./views/About.vue"; Vue.use(Router); export default new Router({ mode: "history", base: process.env.BASE_URL, routes: [ { path: "/", name: "home", component: Home }, { path: "/about", name: "about", component: About } ] }); 위와 같이 작성 하면 아래와 같이 About.vue 에 관련된 코드가 ap..

vuex + typescript 사용 하기 vuex 를 typescript 로 사용하기 위한 라이브러리는 https://github.com/championswimmer/vuex-module-decorators championswimmer/vuex-module-decorators TypeScript/ES7 Decorators to create Vuex modules declaratively - championswimmer/vuex-module-decorators github.com 위에 오픈 소스 프로 젝트를 사용 하였습니다. vuex-module-decorators 설치는 간단히 npm install -D vuex-module-decorators 로 하면 됩니다. 자료로 작성하는 이유는 github 소개..

vue-cli-service serve Building 중 Hang (멈춤) 걸릴때 한참을 기다려도 Building이 안될때가 있습니다. 그럴땐 꼭 Lint로 에러를 체크 한뒤 에러 수정 뒤에 다시 serve 를 하면 Building 하면 되는 경우가 많습니다. 저의 경우 serve 가 안되서 한참 찾아 해메다 lint 를 보고 DOM의 tag짝이 맞지 않는 부분을 찾아 냈습니다. tag 짝을 맞춰 주니 잘 Budling 되었습니다.

Vue js 환경 변수 만들기 (배포 환경 별로 변수 값 변경) Vue Cli3 에서 환경 변수 적용 방법을 정리 합니다. 참조 : https://cli.vuejs.org/guide/mode-and-env.html#environment-variables .env # loaded in all cases .env.local # loaded in all cases, ignored by git .env.[mode] # only loaded in specified mode .env.[mode].local # only loaded in specified mode, ignored by git위와 같이 파일을 만들어 주면 Root 폴더에 만들어 주면 사용 가능하다고 합니다. 여기서 mode 는 vue-cli-servi..

handsontable copy 시 Column 까지 copy 기본 handsontable 은 Copy 시에 Column에 복사 되지 않아서 엑셀에 붙혀 넣을때 많이 불편합니다. 그리고 구글링한 코드를 적습니다. 기본은 node_modules\handstontable\dist 에 있는 코드를 변경 하는것입니다. pro 일때는 node_modules\handstontable-pro\dist 에 있는 코드를 변경 합니다. function getRangedData(ranges) 을 아래와 같이 변경해 줍니다. key: 'getRangedData', value: function getRangedData(ranges) { var _this4 = this; var dataSet = []; var copyableRo..

vue-custom-element 현재 CLI3 에서 지원하는 webcomponent 는 IE11 지원하지 않습니다. 그래서 아래의 글을 찾아 봤습니다. 그리고 따라 했더니 잘 되었습니다 . 일단 npm install vue-custom-element --save npm install document-register-element --save npm install webpack --save 위에 필요한 3가지를 설치 합니다. 일단 main.js 에 웹 컴포넌트 제작을 위한 main.js 가 필요 합니다 . 제가 사용한 Custom-element 는 import Web360Component from '@/components/Web360/Web360Component.vue'라는 요소 입니다. main.js ..

vue cli 3.0 vue ui 사용하기 vue clli 3.0 부터는 vue ui가 추가 되었습니다. 위와 같이 vue ui 를 치고 들어가면 아래와 같이 셋팅을 GUI를 만질수가 있습니다. 해당 세팅 에서는 위와 같이 셋팅이 가능 합니다. 설정의 변경이 일어 나면 vue.config.js 가 생성 됩니다. module.exports = { baseUrl: '/test/', devServer: { proxy: { '/test': { target: 'http://127.0.0.1:8181/test/', changeOrigin: true, pathRewrite: { '^/test': '' } } } }} 해당 vue.config.js 는 프록시 테이블을 만들때도 사용 될수 있습니다 ~!. 그외 webpa..