## 一、配置好proxyTable代理，需要重启下项目，不然不生效 config/index.js 在开发(dev)配置下添加如下 ~~~ proxyTable: { '/api': { target: 'http://xxx.com/api', changeOrigin: true, //是否跨域 pathRewrite: { // '^/api': '/api' //需要rewrite重写的, } } }, ~~~ 配置方式：https://www.cnblogs.com/congxueda/p/7087144.html 如果配置没有生效，可以重启下服务看下 ## 二、修改build后的路径 config/index.js -> build ~~~ assetsPublicPath: './', ~~~ ## 三、禁止在浏览器自动打开 config/index.js -> dev ~~~ autoOpenBrowser: false, ~~~ ## 四、vue-router使用history模式，build后在apache服务器访问 首先配置个虚拟主机，如www.test.com 目录指向网站根目录中的build后的项目，然后新建个.htaccess文件，内容如下， ~~~ <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ~~~   最后访问 www.test.com 就可以了  >注意： 配置完虚拟主机后proxyTable就无效了 ## 五、script text/template模板里不能使用v-for ~~~ <script type="text/template"> <ul> <li v-for="item in data"> {{ item.name }} </li> </ul> </script> ~~~ 这样会报item是undefined，，解决方案，把script text/template换成div容器 如果要获取更新后的html ~~~ vm.$nextTick(function() { console.log($('#js_flight').html()); }); ~~~ ## 六、如果不想双向绑定可以这样 ~~~ <div id="js_app"> <input v-model="filterUser.name" /> {{ user.name }} </div> <script> new Vue({ el: '#js_app', data: { user: { name: 'zhangsan' } }, computed: { filterUser: function() { return JSON.parse(JSON.stringify(this.user)); } } }); ~~~ ## 七、在数据没有错误的情况下，如果遇到sort不更新的话，就尝试下加个key属性 ~~~ <ul> <li v-for="item in list" :key="item.id">{{ item.sort }} {{ item.name }}</li> </ul> ~~~ ## 八、如果遇到key是undefined，那么整个vue会挂掉，这里只要在Kt函数里多加个判断，判断r是存在的 > function Kt(r,i){return r&&r.key===i.key&&(r.tag===i.tag&&r.isComment===i.isComment&&t(r.data) ## 九、build时去掉.map config/index.js ~~~ productionSourceMap: false ~~~ ## 十、nginx 服务器部署 下载 nginx for window 下载地址：http://nginx.org/en/download.html  到安装目录下启动 nginx E:\nginx-1.14.0 ~~~ start nginx ~~~ 访问 localhost 就可以看到默认的页面了。 下面我们把 vue build 的目录放到 E:\nginx-1.14.0\html下，然后修改配置文件 ~~~ location / { try_files $uri $uri/ /index.html; root html/dist; index index.html index.htm; } location /api { proxy_pass http://xxx/api; # 最好使用一个公共的path #rewrite '/api' '/' #add_header 'Access-Control-Allow-Origin' '\*';     #add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; #proxy_set_header Host $host; #proxy_set_header X-Real-IP $remote_addr; #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } ~~~ 重启 nginx ~~~ nginx.exe -s reload ~~~ 刷新浏览器就可以看到项目页面了。 查看 nginx 命令 ~~~ nginx -h ~~~  注意：如果Nginx报错，就看下本地启动的服务端口号与Nginx配置的各项服务端口号是否有冲突 ## 十、解决背景图片路径不对的问题 在 build/utils.js里搜索ExtractTextPlugin，然后添加publicPath: '../../' ~~~ if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } ~~~ ## 十一、刷新页面 **方式1：** ~~~ this.$router.go(0); ~~~ **方式2：** ``` location.reload(); ``` **方式3：** 使用provide 和 inject 以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 App.vue ``` <template> <div> <router-view v-if="isRouterAlive"></router-view> </div> <template> <script> export default { data() { return { isRouterAlive: true } }, provide() { return { reload: this.reload } }, methods: { reload() { this.isRouterAlive = false; this.$nextTick(()=>{ this.isRouterAlive = true; }); } } } </script> ``` Home.vue ``` <template> <div> {{ timestamp }} <button type="button" @click="refresh">刷新页面</button> </div> </template> <script> export default { name: 'home', data() { return { timestamp: Date.now() } }, inject: ['reload'], methods: { refresh() { this.reload(); } } } </script> ``` 注意：方式1和方式2刷新页面体验不是很好，如果网速不够快的话，会有一瞬间的白屏 ## 十二、兼容IE ~~~ npm install babel-polyfill --save-dev ~~~ 然后在webpack.base.conf.js里，改下入口配置，如下 ~~~ entry: { 'babel-polyfill': 'babel-polyfill', app: './src/main.js' } ~~~ ## 十三、vue-router 3.x懒加载 官方推荐：https://router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk ~~~ let Login = ()=>import('@pages/login/index') ~~~ 其它方式： ~~~ let Login = resolve=>require(['@/pageslogin/index'], resolve) ~~~ 如果build后，跳转页面没有内容，可能没找到文件，这时可以看下 config/index.js下的build的路径配置，确保assetsPublicPath为根目录 ~~~ build: { // ... assetsPublicPath: '/' ~~~ ## 十四、如遇到JSON.stringify编译报错，可以改成window.JSON.stringify试下 ## 十五、如果vendor打包文件过大，可以试着拆分，通过cdn引入，如果还想能过import导入使用，可以在webpack.base.conf.js里加上externals配置 https://webpack.js.org/configuration/externals/#src/components/Sidebar/Sidebar.jsx ~~~ entry: {}, output: {}, externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', 'element-ui': 'ElementUI' } ~~~ ## 十六、gzip压缩chunked传输nginx配置 ~~~ http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #开启gzip gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types text/css application/javascript image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { try_files $uri $uri/ /index.html; root html/dist; index index.html index.htm; chunked_transfer_encoding on; // 开启chunk } # 缓存js、css location ~ .*\.(js|css)?$ { expires 1h; } location /test { proxy_pass http://www.xxx.com/test; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } #... ~~~ ## 十七、nginx修改上传文件大小，在http下添加client_max_body_size配置就行了，说明下如： ~~~ Syntax: client_max_body_size size; Default: client_max_body_size 1m; Context: http, server, location ~~~ ## 十八、单页内路由跳转 1、路由模式使用hash，或者不设，因为默认mode就是hash ## 十九、如果遇到key是未定义的，这时可能是因为在绑定key的时候有重复，可以针对改下key