vue cli版本在4.0以上的常见问题
1.创建项目
2.修改项目端口号
在 node_modules/@vue/cli-service/lib/commands/serve.js文件中修改,如下图所示
3.打包部署到nginx服务器
3.1 首先在根目录下创建vue.config.js
module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' }
3.2 使用命令打包
npm run build
生成的文件在dist目录下,此时生成的文件是不可以直接访问的,需要部署在http服务器下,所以我们借助nginx来进行部署。
3.3 如果为安装部署nginx,参考此处
3.4 nginx的静态资源的分离,参考此处
3.5 将dist目录下的文件放在你nginx指定的目录下,在浏览器访问即可
nginx的配置:
dist文件对应的目录:
在浏览器访问路径:
4. 引入jquery
4.1 首先使用指令安装jquery
npm install jquery --save
4.2 在main.ts进行引用
import 'jquery'
4.3 在vue.config.js文件中添加以下配置
// 引入jq需要加入以下代码 const webpack = require('webpack') chainWebpack: config => { config.plugin('provide').use(webpack.ProvidePlugin, [{ $: 'jquery', jquery: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }]) }
注意:若没有vue.config.js,则需要自己新建一个该文件
下面贴出vue.config.js的代码
// 引入jq需要加入以下代码 const webpack = require('webpack') module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devServer: { port: 3000, //前台代理端口 proxy: { '/vue': { target: 'http: //localhost:2000', //后台接口 ws: true, //如果要代理websockets secure: false, // 使用的是http协议则设置为false,https协议则设置为true changeOrigin: true, //将选项changeOrigin设置true为基于名称的虚拟托管站点。 pathRewrite: { '^/vue': '/vue' } } } }, chainWebpack: config => { config.plugin('provide').use(webpack.ProvidePlugin, [{ $: 'jquery', jquery: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }]) } }
4.4 具体如何使用
在你要使用的页面中添加
import $ from "jquery";
5.部署至tomcat 服务器
5.1 在服务器上的Tomcat的 webapps文件夹下,新建一个文件夹如:vueservice
5.2 将我们打包好的dist目录中的文件放在刚刚新建的文件夹下,注意打包方式与部署至nginx服务器方式一致,注意打包后对index.html的修改,参考3.打包部署到nginx服务器
5.3 启动tomcat服务器,访问路径如下:http://localhost:8083/vueservice/
6.解决vue部署至服务器刷新非主页面404问题
6.1 路由配置是history模式,所以我们将history模式去掉
打开 router/index.ts,删除mode: “history”
7.vue组件引用js文件的函数
7.1 我们在util.js文件中创建了一个函数,而我们要想在组件中使用这个函数,则必须使用export进行导出
export function getFileType(fileName) { var index = fileName.indexOf("."); var type = fileName.substr(index + 1); return type; }
7.2 具体在组件中的使用
import {getFileType} from "../../assets/js/util.js";
注意必须要使用{}进行处理
7.3 引用css文件
@import "../../assets/css/common.css";
8.配置跨域
8.1 首先引入axios
npm install --save axios vue-axios
8.2 在main.ts(main.js)文件中进行引入
import axios from 'axios'
Vue.prototype.$axios = axios
注意:使用axios时直接使用 this.$axios即可
8.3 配置跨域
在vue.config.js文件中添加以下代码,注意:若没有vue.config.js参考本文第四章创建此文件
proxy: { '/api': { target: 'http://localhost:8088', //你要跨域的网址 比如 'http://news.baidu.com', // secure: true, // 如果是https接口,需要配置这个参数 changeOrigin: true, //这个参数是用来回避跨站问题的,配置完之后发请求时会自动修改http header里面的host,但是不会修改别的 pathRewrite: { '^/api': '/api' //路径的替换规则 //这里的配置是正则表达式,以/api开头的将会被用用‘/api’替换掉,假如后台文档的接口是 /api/list/xxx //前端api接口写:axios.get('/api/list/xxx') , 被处理之后实际访问的是:http://news.baidu.com/api/list/xxx } } }
8.4 具体如何使用
testCross() { console.log("aaaaaaaaaaa"); this.$axios({ method: "post", url: "http://localhost:8088/campusGang/test/test1", data: { firstName: 'Fred', lastName: 'Flintstone' } headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8", }, }).then((res) => { console.log(res); }).catch((error)=>{ console.log(error) }); },
9.解决‘vue-cli-service’ 不是内部或外部命令,也不是可运行的程序或批处理文件的报错
9.1 解决办法
将项目里的“node_modules”文件夹删除,然后运行npm run i,如果没有这个文件夹就直接运行npm run i,运行结束之后重新npm run serve即可
10.引入echarts
1.使用指令下载所需要的库
npm install echarts -S
2.在main.js(或者main.ts)文件中进行引用
// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts
11.推荐一款日期格式化插件 moment
11.1 安装
npm install moment --save
11.2 在使用的页面进行引用
import moment from "moment";
11.3 如何使用
this.startTime=moment(this.startTime).format("YYYY-MM-DD HH:mm:ss")
此时日期就会格式化为如2020-10-28 15:28:21
12.vue路由设置
12.1 配置页面带参数的跳转
12.1.1 传参
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
12.1.2 接受参数
var color=this.$route.query.color
12.2 消除地址栏路由参数
- 方法1:
let path = this.$route.path; //先获取路由路径 this.$router.push(path); //再跳转路由路径,query参数没带过去,所以被清除了
- 方法2:
this.$router.push({ query: {} });
13.vue-cli取消eslint
找到.eslintrc.js将"@vue/prettier"注释掉
重新启动项目即可
14.vue引入Cookies
14.1 安装js-cookie
npm install --save js-cookie
14.2 在需要使用的文件里引入依赖
import Cookies from 'js-cookie'; //引入cookie操作依赖
下面给出一些cookie的常用操作
export function getCookie(key) { return Cookies.get(key) } export function setCookie(key, value) { return Cookies.set(key, value) } export function removeCookie(key) { return Cookies.remove(key) }
15.npm cnpm的切换
15.1 npm -->cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
15.2 cnpm–> npm
npm config set registry https://registry.npmjs.org