Vue-项目搭建时的常用配置

Posted yangchin9

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-项目搭建时的常用配置相关的知识,希望对你有一定的参考价值。

1、Vue静态资源存放的选择

assets: 编译过程中会被webpack处理理解为模块依赖,只支持相对路径的形式,assets放可能会变动的文件。
static: 存放第三方文件的地方,不会被webpack解析,会直接被复制到最终的打包(默认是dist/static)下,必须使用绝对路径引用这些文件.static放不会变动的。

2、项目图标设置

  将icon-website.png的图标文件放到static文件夹内,在index.html的head中添加:

<link rel="shortcut icon" type="image/x-icon" href="static/icon-icon.png">

3、项目地址 去掉‘#‘

  项目搭建后,路径中会有个 ‘#‘ 号,如果想把 ‘#‘ 号去掉,需要把项目的路由方式设置为 history 模式;这种模式在页面刷新时会报错(404),需要在服务端设置相应配置。

export default new Router({
  mode: ‘history‘,        //设置history模式
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    }
  ]
})  

  Apache:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

  nginx:

location/{
  try_files $uri $uri/ /index.html;
}

  原生Node.js

const http = require(‘http‘)
const fs = require(‘fs‘)
const httpPort = 80
http.createServer((req,res)=>{
    fs.readFile(‘index.htm‘,‘utf-8‘,(err,content)=>{
        if(err){
            console.log(‘We cannot open "index.htm" file.‘)
        }
        res.writeHead(200,{
            ‘Content-Type‘:‘text/html; charset=utf-8‘
        })
        res.end(content)
    })
}).listen(httpPort,()=>{
    console.log(‘Server listening on: http://localhost:%s‘,httpPort)
})

补充:什么是vue-router的history模式?

 

以上是关于Vue-项目搭建时的常用配置的主要内容,如果未能解决你的问题,请参考以下文章

vue项目搭建及基本配置

团队协作统一vue代码风格,vscode做vue项目时的一些配置

vue3.2 基础及常用方法

Vue---Vue.config常用配置项

搭建vue-cli项目和打包项目

VSCode自定义代码片段11——vue路由的配置