vue-cli

Webpack and VueJs CLI v3 – Need relative path for images and web-fonts

由 自古美人都是妖i 提交于 2021-02-18 13:55:41
问题 Using: Vue CLI 3.0.0-rc.3 How can I config my app, that it is loading the A) css itself , B) the fonts loaded in css and C) the images from a relative path depending to the parent-folder the app is located? My complete vue app is currently running without extra webpack config file. I already know, I would need to create a webpack.config.js, but I don't know what plugins or configuration is necessary. The app is full functional under absolute path http:whatever.local/ of course. But I need to

PWA doesn't load when router is in history mode (Vue CLI 3 based project)

由 不羁岁月 提交于 2021-02-18 12:56:09
问题 I have a Vue CLI 3 based app which I would like to function as a PWA. I need it to work in history mode, because the hash intervenes in redirects that I'm doing as part of an OAuth based authentication process. When the routing is in hash mode, the manages to load fine as PWA. Once I change the mode to 'history', the PWA I installed won't load anymore - I'm getting a white screen instead. I checked the browser version and it still works fine (I configured the fallback in my NGINX server to

PWA doesn't load when router is in history mode (Vue CLI 3 based project)

由 杀马特。学长 韩版系。学妹 提交于 2021-02-18 12:56:06
问题 I have a Vue CLI 3 based app which I would like to function as a PWA. I need it to work in history mode, because the hash intervenes in redirects that I'm doing as part of an OAuth based authentication process. When the routing is in hash mode, the manages to load fine as PWA. Once I change the mode to 'history', the PWA I installed won't load anymore - I'm getting a white screen instead. I checked the browser version and it still works fine (I configured the fallback in my NGINX server to

webpack-dev-server how to reload css without page refresh

由 半城伤御伤魂 提交于 2021-02-18 06:47:08
问题 When I change styles in my .vue files and .css files, I dont' want the page to refresh, and I want the style auto change. But now page always refresh when I change the styles. I'm using the vue-cli to generate the webpack config file. as below webpack.dev.conf.js const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: false }) }, // cheap-module-eval-source-map is faster for development devtool: config.dev

Vue入坑——vue-cli（脚手架）目录结构认识

由 て烟熏妆下的殇ゞ 提交于 2021-02-17 12:46:36
上一篇：搭建vue-cli脚手架 一起学vue—— vue学习总路线 ——————————^~^我是萌萌哒分割线^~^———————————————— 上一篇已经将vue-cli脚手架搭建好了，现在来认识一下脚手架里都是些啥东西，这里对重要的文件进行解释 （只是简单解释一下，如果要深入了解的话，自己搜一下哦） .一、目录结构 |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.js // 构建本地服务器 | |-- utils.js // 构建工具相关 | |-- webpack.base.conf.js // webpack基础配置 | |-- webpack.dev.conf.js // webpack开发环境配置 | |-- webpack.prod.conf.js // webpack生产环境配置 |-- config // 项目开发环境配置 | |-- dev.env.js // 开发环境变量 | |-- index.js // 项目一些配置变量 | |-- prod.env.js // 生产环境变量 | |-- test.env.js /

Vue入坑——vue-cli（脚手架）搭建

由 淺唱寂寞╮ 提交于 2021-02-17 11:42:28
一起学vue—— vue学习总路线 ——————————^~^我是萌萌哒分割线^~^———————————————— 语法学了，现在就该实操了。 安装个脚手架试试。 一、安装环境 （1）、安装node 先从 node.js官方下载 ，安装过程很简单，这里就不赘述了（傻瓜式安装） 安装完成后，用命令行输入：node -v，显示版本号，就说明安装成功 安装好node以后就自带npm安装包管理工具了，npm的服务器是国外的，因此会很慢，也许对后面的操作产生影响，因此在这里安装淘宝镜像： 输入： npm install -g cnpm --registry= https://registry.npm.taobao.org 安装完之后，输入：cnpm -v，显示版本号则安装成功 （2）、安装webpack 输入： npm install webpack -g 这里的-g是全局安装的意思，如果不想全局安装可以不要 安装好后，还是查看一下版本号以确认是否安装成功：webpack -v （3）、安装vue-cli脚手架： 输入： npm install vue-cli -g 安装完后输入：vue -V（V是大写哦！） 二、构建项目 通过以上步骤，环境我们都搭建好了，现在开始构建我们的项目 1、在你想要建项目的目录下，打开命令行，如果安装了git，可以使用git bash here 2、输入：vue

Vue 3 external component/plugin loading in runtime

由 两盒软妹~` 提交于 2021-02-17 05:27:05
问题 I am designing an architecture for the Vue 3 app with distributed module-based ownership. Module system will be represented with plugins (seems like the most appropriate solution allowing vuex module and vue-router dynamic injects). Each such module/plugin will be developed by dedicated team working within isolated repos. We cannot use npm package-per-plugin approach as deployment process should be isolated as well, and with npm approach core app team will have to rebuild app each time npm

Vue Router not working once production is built

由 99封情书 提交于 2021-02-11 14:15:53
问题 My Vue project works correctly when I build it using dev. However, once I run npm run build and move the files in dist to my webserver, Vue Router doesn't seem to work anymore. I've tried removing history mode, but this didn't work. Vue Router import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import axios from 'axios' Vue.use(Router) const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component:

highjack minified builded dist folder to change a api backend target

由 谁说我不能喝 提交于 2021-02-11 12:47:25
问题 Explanation i have a dist build of my Vue-CLI App. inside i am using .env vars to handle my Axios.baseURL for my entire APP. ofc in dev mode i am using a dev Backend and DB, in stage , using a mirror of master Backend and DB, and on master the correct Backend and DB for production. what i want is to build with npm run build to create a stage (testable product) and then if the tests results positiv, move the whole dist folder to my production without changing anything of the dist folder,

How to add Router to @vue/cli app with vuejs 3?

由 廉价感情. 提交于 2021-02-11 12:38:01
问题 Learning vuejs3 I created new @vue/cli app with command vue create myapp with vuejs 3 selected I added Router to my project and added Router reference in my src/main.js : import { createApp } from 'vue' import { createRouter/*, createWebHistory */ } from 'vue-router' import WelcomeScreen from './pages/WelcomeScreen.vue' import UsersList from './pages/UsersList.vue' import App from './App.vue' const router = createRouter({ // history: createWebHistory(), mode: 'history', routes: [ { path: '/',
订阅 vue-cli