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

Posted 2021-12-02 yangchin9

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模式？